\r\n }\r\n sizer =
\r\n let closeButtonBackgroundColor = (this.props.pageType == \"help\") ? \"#fff\" : defaultPageBackgroundColor;\r\n stack =
\r\n
\r\n \r\n
\r\n {stackContent}\r\n
\r\n {colorBlock} \r\n
\r\n }\r\n let sidebarProps:ISidebarProps;\r\n if (this.props.sidebar){\r\n sidebarProps = this.props.sidebar.props;\r\n }\r\n\r\n let navbarProps:INavbarProps = this.props.navbarProps;\r\n \r\n let outerStyle:React.CSSProperties = {};\r\n \r\n \r\n let className=\"RT-Stackable-Container\";\r\n className += \" RT-Stackable-Container--\" + canvas.layer;\r\n if (this.props.containerClass){\r\n className += \" \" + this.props.containerClass;\r\n }\r\n \r\n if (this.props.scrollable){\r\n className += \" RT-Stackable-Container--scrollable\";\r\n bodyClass += \" RT-Stackable-Container--scrollable\";\r\n }\r\n if (covered){\r\n className += \" RT-Stackable-Container--covered\";\r\n outerStyle.height = 0;\r\n }\r\n else if (stackContent){\r\n outerStyle.opacity = 0.80;\r\n }\r\n let sidebarOpen:boolean;\r\n let sidebarWidth:any;\r\n if (sidebarProps && sidebarProps.children && sidebarProps.children.length){\r\n sidebarOpen = canvas.sidebarState && canvas.sidebarState.isOpen;\r\n sidebarWidth = sidebarProps.width || 400;\r\n if (sidebarProps.fixedOpen){\r\n sidebarOpen = true;\r\n }\r\n }\r\n\r\n let navbarOpen:boolean;\r\n let navbarWidth:any;\r\n if (navbarProps){\r\n navbarOpen = !canvas.navbarState || !canvas.navbarState.isCollapsed;\r\n navbarWidth = navbarProps.width || 240;\r\n }\r\n \r\n /*\r\n if (stackContent && stackLayer == \"preview\"){\r\n previewContent =
\r\n {stackContent}\r\n
\r\n }\r\n */\r\n let sidebarContent;\r\n if (sidebarOpen){\r\n let sidebarStyle:React.CSSProperties = {width:sidebarWidth,position:\"relative\",zIndex:20};\r\n if (canvas.layer == \"dialog\" || canvas.layer == \"dialog-stack\" || canvas.layer == \"popup\"){\r\n sidebarStyle.backgroundColor = \"transparent\";\r\n }\r\n if (sidebarProps.overlayBody){\r\n sidebarStyle.boxShadow = \" 0 4px 4px rgb(100 110 120 / 40%)\";\r\n }\r\n let closeButton;\r\n if (!sidebarProps.fixedOpen){\r\n closeButton = (\r\n
\r\n {this.renderCloseSidebar()}\r\n
\r\n );\r\n }\r\n sidebarContent =
\r\n {this.props.sidebar}\r\n {closeButton}\r\n
\r\n }\r\n else if (sidebarProps && sidebarProps.children && sidebarProps.children.length){\r\n sidebarContent =
{this.renderOpenSidebar()}
\r\n }\r\n\r\n let navbarContent;\r\n if (navbarOpen){\r\n let navbarStyle:React.CSSProperties = {width:navbarWidth,overflowY:\"auto\",height:\"100%\"};\r\n if (navbarProps.overlayBody){\r\n navbarStyle.boxShadow = \" 0 4px 4px rgb(100 110 120 / 40%)\";\r\n }\r\n let closeButton;\r\n if (navbarProps.collapsible){\r\n closeButton = (\r\n
\r\n {this.renderCloseSidebar()}\r\n
\r\n );\r\n }\r\n navbarContent =
\r\n
\r\n {this.props.navbar}\r\n
\r\n {closeButton}\r\n
\r\n }\r\n else if (navbarProps){\r\n navbarContent = (
\r\n {this.renderOpenSidebar()}\r\n
)\r\n }\r\n\r\n\r\n let mainStyle:React.CSSProperties = {zIndex:2};\r\n if (canvas.layer == \"stack\"){\r\n mainStyle.backgroundColor = this.getPageBackgroundColor();\r\n mainStyle.minHeight = 100;\r\n }\r\n \r\n if ((canvas.layer == \"workspace-tab\" || canvas.layer == \"stack\") && canvas.width){\r\n if (canvas.width == \"small\"){\r\n mainStyle.maxWidth = 600;\r\n // mainStyle.marginLeft = 'auto';\r\n // mainStyle.marginRight = 'auto';\r\n }\r\n else if (canvas.width == \"medium\"){\r\n mainStyle.maxWidth = 900;\r\n mainStyle.marginLeft = 'auto';\r\n mainStyle.marginRight = 'auto';\r\n }\r\n else if (canvas.width == \"large\"){\r\n mainStyle.maxWidth = 1240;\r\n mainStyle.marginLeft = 'auto';\r\n mainStyle.marginRight = 'auto';\r\n }\r\n else if (canvas.width == \"x-large\"){\r\n mainStyle.maxWidth = 1560;\r\n mainStyle.marginLeft = 'auto';\r\n mainStyle.marginRight = 'auto';\r\n }\r\n }\r\n \r\n if (canvas.layer == \"embedded\"){\r\n // outerStyle.padding = \"15px 30px 0 30px\";\r\n }\r\n let footerElem;\r\n\r\n if (this.props.footer){\r\n let footerClass = \"RT-Stackable-Container__footer\";\r\n if (this.props.footerClass){\r\n footerClass += \" \" + this.props.footerClass;\r\n }\r\n footerElem =
{this.props.footer}
\r\n }\r\n let mainContent;\r\n\r\n if (navbarContent){\r\n mainContent = (<>\r\n {headerElem}\r\n
\r\n {body}\r\n
\r\n {footerElem}\r\n );\r\n }\r\n else {\r\n mainContent = (<>\r\n {headerElem}\r\n
\r\n {body}\r\n
\r\n {footerElem}\r\n );\r\n }\r\n if (this.props.scrollable){\r\n mainContent =
{mainContent}\r\n }\r\n \r\n if (stackContent && stackPosition == \"overlay\"){\r\n \r\n mainStyle.marginLeft = 0 ;\r\n mainStyle.marginRight = 0;\r\n }\r\n let sidebarElem;\r\n if (sidebarContent){\r\n let sidebarClass = this.props.sidebarClass;\r\n let sidebarStyle:React.CSSProperties;\r\n if (sidebarProps.overlayBody){\r\n sidebarStyle = {position:\"absolute\",top:0,left:0,right:0,bottom:0,zIndex:5};\r\n }\r\n \r\n sidebarElem = (
\r\n {sidebarContent}\r\n
)\r\n }\r\n\r\n let navbarElem;\r\n if (navbarContent){\r\n let navbarClass = this.props.navbarClass;\r\n let navbarStyle:React.CSSProperties;\r\n if (navbarProps.overlayBody){\r\n navbarStyle = {position:\"absolute\",top:0,left:0,right:0,bottom:0,zIndex:5};\r\n }\r\n \r\n navbarElem = (
\r\n {navbarContent}\r\n
)\r\n }\r\n let draftInfo:any;\r\n if (canvas.pageInfo.draft_id && !canvas.renderDesignSlot){\r\n let style:React.CSSProperties = {paddingLeft:25,paddingTop:2,display:\"flex\",alignItems:\"center\"};\r\n if (canvas.pageType == \"help\"){\r\n style.backgroundColor = \"#fff\";\r\n }\r\n draftInfo =
\r\n }\r\n \r\n return <>\r\n
\r\n {navbarElem}\r\n
\r\n {draftInfo}\r\n {mainContent}\r\n
\r\n {sidebarElem}\r\n
\r\n {stack}\r\n {sizer}\r\n \r\n }\r\n\r\n setOverlaySize = (adjustX:number) => {\r\n let canvas = this.props.canvas;\r\n let newOffset = canvas.stackOverlayOffsetX + adjustX;\r\n let containerWidth = this.containerRef.current.offsetWidth;\r\n if (newOffset > containerWidth - 300){\r\n newOffset = containerWidth - 300;\r\n }\r\n if (newOffset < 80){\r\n newOffset = 80;\r\n }\r\n\r\n canvas.stackOverlayOffsetX = newOffset;\r\n canvas.app.canvasSettingsCache.setOverlayWidth(canvas.launchParams.name,newOffset);\r\n canvas.update();\r\n }\r\n\r\n getContainerWidth = ():number =>{\r\n if (this.containerRef.current){\r\n return this.containerRef.current.offsetWidth;\r\n }\r\n }\r\n\r\n renderCoveredHeader(title:any,navigator:any){\r\n let nav;\r\n \r\n nav = (
\r\n {navigator}\r\n
);\r\n \r\n let style:React.CSSProperties;\r\n let canvas = this.props.canvas;\r\n \r\n if (canvas.layer == \"dialog\" || canvas.layer == \"dialog-stack\" || canvas.layer == \"popup\"){\r\n style = {backgroundColor:\"#fff\",opacity:1,borderTopLeftRadius:5,borderTopRightRadius:5,padding:\"0 35px\"};\r\n }\r\n else if (canvas.layer != \"workspace\"){\r\n style = {backgroundColor:this.getPageBackgroundColor()};\r\n }\r\n let closeButton;\r\n if ((canvas.layer == \"dialog\" && canvas.showClose) || canvas.layer == \"popup\"){\r\n closeButton =
\r\n \r\n
\r\n }\r\n return (
\r\n {title}\r\n
\r\n {nav}\r\n {closeButton}\r\n
);\r\n }\r\n \r\n \r\n\r\n handleOpenSidebar = (e:React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n this.props.canvas.sidebarState.isOpen = true;\r\n this.forceUpdate();\r\n }\r\n\r\n handleCloseSidebar = (e:React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n this.props.canvas.sidebarState.isOpen = false;\r\n this.forceUpdate();\r\n\r\n }\r\n\r\n handleOpenNavbar = (e:React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n this.props.canvas.navbarState.isCollapsed = false;\r\n this.forceUpdate();\r\n }\r\n\r\n handleCloseNavbar = (e:React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n this.props.canvas.navbarState.isCollapsed = true;\r\n this.forceUpdate();\r\n\r\n }\r\n handleCloseStack = (e: React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n let canvas = this.props.canvas;\r\n canvas.closeStack();\r\n this.forceUpdate();\r\n }\r\n\r\n handleClickClose = (e:React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n this.props.canvas.closeDialogBox({continue:false});\r\n }\r\n renderOpenSidebar(){\r\n return (
);\r\n }\r\n\r\n renderCloseSidebar(){\r\n return (
);\r\n }\r\n\r\n \r\n}\r\n\r\nclass OverlayCloseButton extends React.Component<{onClick,canvas:Canvas,stackPosition:CanvasStackPosition,backgroundColor:string}>{\r\n render(){\r\n let goFull;\r\n let goOverlay;\r\n let canvas = this.props.canvas;\r\n if (canvas.layer == \"workspace-tab\" && this.props.stackPosition =='top'){\r\n goOverlay = (
\r\n )\r\n }\r\n else {\r\n goFull = (
\r\n )\r\n }\r\n\r\n return (
\r\n
\r\n {goFull}\r\n {goOverlay}\r\n
)\r\n }\r\n\r\n handleClickFull = (e:React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n let canvas = this.props.canvas;\r\n canvas.stackPositionOverride = \"top\";\r\n canvas.update();\r\n }\r\n\r\n handleClickOverlay = (e:React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n let canvas = this.props.canvas;\r\n canvas.stackPositionOverride = \"overlay\";\r\n canvas.update();\r\n }\r\n}\r\n\r\n\r\n","import React from \"react\";\r\n\r\nexport class DialogIcons {\r\n\r\n public static renderSuccessIcon(style:React.CSSProperties) {\r\n return (\r\n
\r\n \r\n \r\n );\r\n }\r\n\r\n public static renderErrorIcon(style:React.CSSProperties) {\r\n return (\r\n \r\n \r\n \r\n );\r\n }\r\n\r\n public static renderInfoIcon(style:React.CSSProperties) {\r\n return (\r\n \r\n \r\n \r\n );\r\n }\r\n\r\n public static renderConfirmIcon(style:React.CSSProperties) {\r\n return (\r\n \r\n \r\n \r\n );\r\n }\r\n}","\r\nimport React from 'react';\r\nimport {makeComponent, RenderEvent} from '../core';\r\nimport { ClickThrottle } from './helpers/ClickThrottle';\r\nimport { StackLayerContainer } from './helpers/StackLayerContainer';\r\nimport { Icon } from './Icon';\r\nimport { DialogContainer } from './popups/DialogContainer';\r\nimport {DialogIcons} from './popups/DIalogIcons';\r\n\r\n\r\nexport const Dialog = makeComponent(class extends React.Component<{event?:RenderEvent,$id?:string;padding?:string,icon?:string,\r\n dialogSize?:string,dialogHeight?:string,title?:any;style?:string,footer?:any,actions?:any;\r\n sidebar?:any,header?:any,navbar?:any,toolbox?:any}>{\r\n\r\n\r\n render(){\r\n \r\n let canvas = this.props.event.canvas;\r\n let zIndex = canvas.layerZIndex;\r\n\r\n let animate = false;\r\n if (!canvas.animationComplete){\r\n animate = true;\r\n canvas.animationComplete = true;\r\n }\r\n let size = this.props.dialogSize || \"small\";\r\n let height = this.props.dialogHeight;\r\n let event = this.props.event;\r\n\r\n\r\n let stackContent;\r\n let coveredTitle;\r\n if (canvas.stackChild) {\r\n stackContent = canvas.stackChild();\r\n coveredTitle = {canvas.title}
\r\n }\r\n\r\n let title = this.props.title; // || event.canvas.title;\r\n\r\n let header = {this.props.actions}\r\n let body = this.props.children;\r\n let footer = this.props.footer;\r\n \r\n let isLookup = (canvas.layer == \"lookup\");\r\n if (size == \"full\" || size == \"designer\"){\r\n let addOnClass = (size == \"designer\") ? \"RT-Modal--designer\" : null;\r\n body = \r\n return this.renderFullScreenDialog(zIndex,animate,header,body,footer,isLookup,addOnClass);\r\n }\r\n let className = \"RT-Action-Dialog__body\";\r\n if (this.props.padding){\r\n className += \" RT-Action-Dialog--padding-\" + this.props.padding;\r\n }\r\n else {\r\n className += \" RT-Action-Dialog--padding-none\";\r\n }\r\n \r\n if (this.props.footer && this.props.footer.props){\r\n let footerProps = this.props.footer.props;\r\n footer = {footerProps.children}\r\n }\r\n else {\r\n footer = \r\n }\r\n \r\n if (canvas.layer == \"bot-message\"){\r\n return (\r\n {header}\r\n
\r\n {body}\r\n
\r\n {footer}\r\n
\r\n {header}\r\n
\r\n {body}\r\n
\r\n {footer}\r\n
\r\n {body}\r\n
\r\n }\r\n else {\r\n content = <>\r\n {header}\r\n \r\n {body}\r\n
\r\n \r\n }\r\n if (canvas.layer == \"popup\"){\r\n return content;\r\n }\r\n return (\r\n {content}\r\n );\r\n }\r\n\r\n renderFullScreenDialog(zIndex:number,animate:boolean,header:any,body:any,footer:any,isLookup:boolean,addOnClassName:string){\r\n let maxWidth = 1400;\r\n let className = \"RT--full-screen\";\r\n if (addOnClassName){\r\n className += \" \" + addOnClassName;\r\n }\r\n return (\r\n \r\n
\r\n
{header}
\r\n
{footer}
\r\n
\r\n
\r\n
\r\n {body}\r\n
\r\n
\r\n
\r\n {footer}\r\n
\r\n
\r\n \r\n
)\r\n }\r\n else if (this.props.style == \"success\"){\r\n icon = (\r\n {DialogIcons.renderSuccessIcon({fill:\"#3fc5d9\",width:26,height:26})}\r\n
)\r\n }\r\n let actions;\r\n if (this.props.children){\r\n actions = {this.props.children}
\r\n }\r\n if (!label && !icon && !actions){\r\n return \r\n }\r\n let style:React.CSSProperties;\r\n let canvas = this.props.event.canvas;\r\n if (canvas.layer == \"dialog-stack\"){\r\n style = {padding:\"10px 25px\",borderTopLeftRadius:0,borderTopRightRadius:0};\r\n }\r\n let close;\r\n if ((canvas.layer == \"dialog\" && canvas.showClose) || canvas.layer == \"popup\"){\r\n close =
\r\n \r\n
\r\n }\r\n \r\n return (
\r\n
\r\n
\r\n {icon}\r\n
{label}
\r\n
\r\n {actions}\r\n
\r\n {close}\r\n
);\r\n }\r\n\r\n handleClick = (e:React.MouseEvent) => {\r\n \r\n if (e.ctrlKey){\r\n e.preventDefault();\r\n e.stopPropagation();\r\n let canvas = this.props.event.canvas;\r\n canvas.viewSource();\r\n\r\n }\r\n }\r\n\r\n handleClickClose = (e:React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n this.props.event.canvas.closeDialogBox({continue:false});\r\n }\r\n \r\n });\r\n\r\n static Footer = makeComponent(class extends React.Component<{event?:RenderEvent;$id:string}>{\r\n\r\n clickThrottle = new ClickThrottle();\r\n \r\n render(){\r\n \r\n return (
\r\n {this.props.children}\r\n \r\n
)\r\n }\r\n \r\n handleCancel = (e:React.MouseEvent) => {\r\n this.clickThrottle.handle(e,null,()=> {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n if (!this.props.event) return;\r\n let canvas = this.props.event.canvas;\r\n if (canvas.closeDialogBox){\r\n canvas.closeDialogBox({continue:false});\r\n }\r\n });\r\n }\r\n });\r\n});","import React from 'react';\r\nimport { Stack } from '../core/Dialog';\r\nimport { ActionRef, Canvas, Collection, makeComponent, RecordBrowse } from '../core';\r\n\r\nexport const BrowseNavigator = makeComponent(class extends React.Component<{canvas:Canvas}>{\r\n\r\n render(){ \r\n \r\n let canvas = this.props.canvas;\r\n let browse = canvas.recordBrowse;\r\n\r\n let backClass = \"RT-Record-Navigator__back\";\r\n let currentIndex = browse.currentIndex;\r\n let count = browse.rows.length;\r\n\r\n if (currentIndex < 1){\r\n backClass += \" RT--disabled\";\r\n }\r\n let forwardClass = \"RT-Record-Navigator__forward\";\r\n if ((currentIndex + 1) >= count){\r\n forwardClass += \" RT--disabled\";\r\n }\r\n let position = (currentIndex + 1) + \" of \" + count;\r\n let label;\r\n if (browse.label){\r\n label =
{browse.label}
\r\n } \r\n return
\r\n {label}\r\n
\r\n {this.renderBackIcon()}\r\n
\r\n
{position}
\r\n
\r\n {this.renderForwardIcon()}\r\n
\r\n
\r\n }\r\n\r\n handleClick = (e:React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n }\r\n\r\n handleClickBack= (e:React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n let canvas = this.props.canvas;\r\n let browse = canvas.recordBrowse;\r\n browse.move(-1);\r\n this.renderRecord(canvas,browse);\r\n }\r\n\r\n handleClickNext = (e:React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n let canvas = this.props.canvas;\r\n let browse = canvas.recordBrowse;\r\n browse.move(1);\r\n this.renderRecord(canvas,browse);\r\n }\r\n\r\n renderRecord(canvas:Canvas,browse:RecordBrowse){\r\n \r\n let current = browse.current;\r\n if (current){\r\n /*\r\n content = browse.renderRecord(current);\r\n Stack.open(canvas,content,browse.onRecordChanged);\r\n canvas.recordBrowse = browse;\r\n canvas.update();\r\n */\r\n let schema = Collection.getSchema(browse.rows);\r\n let scope;\r\n if (schema){\r\n scope = {[schema.name]:current};\r\n }\r\n browse.triggerAction.canvas.triggerAction(browse.triggerAction,{scope,table:browse.rows,current,isBrowseMove:true});\r\n }\r\n }\r\n \r\n renderBackIcon(){\r\n return (
);\r\n }\r\n renderForwardIcon(){\r\n return (
);\r\n }\r\n});\r\n","import { makeComponent, RenderEvent } from '../core';\r\nimport React from 'react';\r\nimport { INavbarProps, StackLayerContainer } from './helpers/StackLayerContainer';\r\nimport { Dialog } from './Dialog';\r\nimport { BrowseNavigator } from './BrowseNavigator';\r\nimport { DialogContainer } from './popups/DialogContainer';\r\nimport { SectionEditor } from './SectionEditor';\r\n\r\n\r\nexport const Page = makeComponent( class extends React.Component<{event:RenderEvent;$id?:string,padding?:string,\r\n header?:any,navbar?:any,sidebar:any,actions?:any,footer?:any,title?:any,toolbox?:any,$elem?:any}>{\r\n \r\n\r\n render(){\r\n \r\n let canvas = this.props.event.canvas;\r\n let contextMenuId = canvas.contextMenuId;\r\n \r\n let layer = canvas.layer;\r\n\r\n \r\n\r\n if (layer == \"popup\" && !this.props.title && !this.props.header){\r\n return this.props.children || null;\r\n }\r\n \r\n\r\n let title;\r\n if (this.props.title){\r\n title = this.props.title;\r\n }\r\n else if (this.props.header && this.props.header.props && this.props.header.props.title){\r\n title = this.props.header.props.title;\r\n }\r\n\r\n \r\n \r\n if (layer == \"dialog\" || layer == \"lookup\" || layer == \"dialog-stack\" || layer == \"popup\"){\r\n\r\n return
\r\n }\r\n \r\n if (layer == \"workspace\" || layer == \"layout\"){\r\n return this.props.children || null;\r\n }\r\n \r\n let scrollable = canvas.scrollable;\r\n let noPadding = canvas.noPadding;\r\n\r\n let asWidget = canvas.asWidget;\r\n\r\n if (layer == \"embedded\" && asWidget){\r\n title = null;\r\n scrollable = false;\r\n noPadding = true;\r\n }\r\n\r\n let actionElem;\r\n let actions = this.props.actions;\r\n if (actions && actions.props && actions.props.children){\r\n actionElem =
\r\n } \r\n\r\n let bodyClass:string = \"\";\r\n let headerClass:string = \"\";\r\n let footerClass:string = \"\";\r\n\r\n if (!noPadding){\r\n bodyClass = \"px-30 pb-30\";\r\n headerClass = \"px-30\";\r\n footerClass = \"px-30\";\r\n }\r\n let pageType= canvas.stackStyle;\r\n \r\n if (canvas.pageType == \"help\"){\r\n bodyClass += \" bg-white\";\r\n headerClass += \" bg-white\";\r\n }\r\n\r\n let headerFieldsElem = this.props.header;\r\n\r\n let headerContent;\r\n let navbarElem;\r\n let navbarProps:INavbarProps;\r\n\r\n if (this.props.navbar){\r\n navbarProps = this.props.navbar.props;\r\n navbarElem = <>\r\n {title}\r\n {this.props.navbar}\r\n \r\n if (headerFieldsElem || actionElem){\r\n headerContent = \r\n }\r\n }\r\n else { \r\n if (headerFieldsElem || title || actionElem){\r\n headerContent = \r\n }\r\n else if (!asWidget) {\r\n headerContent = actionElem;\r\n headerClass = \"p-0\";\r\n }\r\n\r\n }\r\n \r\n \r\n let stackContent;\r\n let coveredTitle;\r\n if (canvas.stackChild) {\r\n stackContent = canvas.stackChild();\r\n coveredTitle = {canvas.title}
\r\n }\r\n \r\n let body = this.props.children;\r\n \r\n let styles = this.props.event.computeStyles(canvas.styles);\r\n let containerClass = styles.className;\r\n headerClass += \" \" + styles.className;\r\n bodyClass += \" \" + styles.className;\r\n\r\n \r\n let sidebarElem = this.props.sidebar;\r\n\r\n let navigator;\r\n if (canvas.recordBrowse){\r\n navigator = \r\n }\r\n \r\n \r\n let container = (\r\n \r\n );\r\n if (asWidget){\r\n return {container}
\r\n }\r\n \r\n return container;\r\n }\r\n\r\n \r\n});\r\n\r\n\r\n\r\n\r\nclass PageBanner extends React.Component<{event:RenderEvent,title?:any,actions?:any,headerFields:any,noSpaceAbove?:boolean}>{\r\n \r\n render(){\r\n \r\n \r\n let actions;\r\n let fields;\r\n let paddingBottom;\r\n \r\n let layer = this.props.event.canvas.layer;\r\n let marginTop = this.props.noSpaceAbove ? 0 : 20;\r\n if (this.props.actions){\r\n if (layer == \"sidebar\"){\r\n actions = {this.props.actions}
\r\n }\r\n else {\r\n actions = (\r\n {this.props.actions}\r\n
);\r\n }\r\n }\r\n\r\n if (this.props.headerFields){\r\n\r\n fields = (\r\n {this.props.headerFields}\r\n
)\r\n paddingBottom = 10;\r\n }\r\n else {\r\n paddingBottom = 20;\r\n } \r\n let contentRow;\r\n if (layer == \"sidebar\"){\r\n contentRow = <>\r\n {this.props.title}\r\n {actions}\r\n \r\n }\r\n else {\r\n let marginLeft = (layer == \"workspace-tab\") ? 5 : 0;\r\n contentRow = (\r\n {this.props.title}\r\n {actions}\r\n
);\r\n }\r\n let className = \"RT-Record-Header RT-Record-Header--\" + layer;\r\n return(\r\n {contentRow}\r\n {fields}\r\n
);\r\n }\r\n\r\n handleClick = (e:React.MouseEvent) => {\r\n \r\n if (e.ctrlKey){\r\n e.preventDefault();\r\n e.stopPropagation();\r\n let canvas = this.props.event.canvas;\r\n canvas.viewSource();\r\n\r\n }\r\n }\r\n}\r\n\r\nclass PageActions extends React.Component<{event?:RenderEvent}>{\r\n render(){\r\n return {this.props.children}
\r\n }\r\n}\r\n\r\n\r\n","import { Application, PageContainer, RenderEvent } from 'core';\r\nimport { MenuHandler } from 'core/MenuHandler';\r\nimport React from 'react';\r\nimport { AnchorPoint } from './helpers/AnchorPoint';\r\nimport { Icon } from './Icon';\r\nimport { Popup } from './popups/Popup';\r\n\r\nexport class MainMenuLaunch extends React.Component<{event:RenderEvent,style:React.CSSProperties},{isOpen:boolean}>{\r\n\r\n state = {isOpen:false};\r\n dropRef = React.createRef();\r\n menuHandler:MenuHandler;\r\n\r\n constructor(props){\r\n super(props);\r\n let app = this.props.event.canvas.app;\r\n this.menuHandler = app.menuManager.createHandler(this.props.event.canvas,this.handleForceClose);\r\n }\r\n componentDidMount(): void {\r\n let app = this.props.event.canvas.app;\r\n app.menuManager.connect(this.menuHandler);\r\n document.addEventListener(\"mousemove\",this.handleMouseMove);\r\n\r\n }\r\n componentWillUnmount(): void {\r\n let app = this.props.event.canvas.app;\r\n app.menuManager.disconnect(this.menuHandler);\r\n document.removeEventListener(\"mousemove\",this.handleMouseMove);\r\n }\r\n\r\n render(){\r\n let popup;\r\n let event = this.props.event;\r\n if (this.state.isOpen){\r\n popup = \r\n }\r\n \r\n let style:React.CSSProperties = {...this.props.style,cursor:\"pointer\"};\r\n return (<>\r\n \r\n \r\n
\r\n {popup}\r\n )\r\n }\r\n\r\n handleClick = (e:React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n if (this.state.isOpen){\r\n this.setState({isOpen:false});\r\n }\r\n else {\r\n this.setState({isOpen:true});\r\n }\r\n \r\n }\r\n\r\n handleMouseEnter = (e:React.MouseEvent) => {\r\n if (!this.state.isOpen){\r\n this.setState({isOpen:true})\r\n } \r\n }\r\n\r\n handleMouseMove = (ev:MouseEvent) => {\r\n if (this.state.isOpen){\r\n let target = ev.target as HTMLElement;\r\n if (target && !target.closest('[data-main-nav-menu]')){\r\n this.setState({isOpen:false});\r\n }\r\n }\r\n }\r\n\r\n handleForceClose = () => {\r\n this.setState({isOpen:false});\r\n }\r\n\r\n}\r\n\r\nexport class MainMenuPopup extends React.Component<{app:Application,menuId:string,dropRef:HTMLElement,forceClose:()=> void,width:number}>{\r\n render(){\r\n return ();\r\n }\r\n\r\n renderMenu = ()=>{\r\n return \r\n \r\n
\r\n }\r\n}\r\n\r\n\r\nexport class MainMenu extends React.Component<{app:Application,handleClose?:() => void}>{\r\n\r\n\r\n render(){\r\n let initialsBadgeBackground = \"rgb(117,196,88)\" ;\r\n let initials = this.getInitials(this.props.app);\r\n let signout:IDropMenuOption = {name:\"signout\",label:\"Sign out\"};\r\n\r\n let links = \r\n return (\r\n {links}\r\n
\r\n
\r\n
\r\n
{initials}
\r\n
My profile and settings
\r\n
\r\n \r\n
\r\n
\r\n
\r\n
);\r\n }\r\n\r\n getInitials(app:Application){\r\n let session = app.session;\r\n let initials:string;\r\n if (session.firstName && session.lastName){\r\n initials = session.firstName[0] + session.lastName[0];\r\n }\r\n else if (session.firstName){\r\n initials = session.firstName.substring(0,2);\r\n }\r\n if (initials){\r\n initials = initials.toUpperCase();\r\n }\r\n return initials;\r\n }\r\n\r\n handleClick = (option:IDropMenuOption) => {\r\n if (option.name == \"signout\"){\r\n this.props.app.session.signout();\r\n }\r\n else {\r\n this.props.app.openWorkspace(option.name);\r\n }\r\n if (this.props.handleClose){\r\n this.props.handleClose();\r\n }\r\n\r\n }\r\n\r\n}\r\n\r\n\r\ninterface IDropMenuOption {\r\n name:string;\r\n label:string;\r\n icon?:string;\r\n description?:string;\r\n}\r\n\r\nclass DropMenuItem extends React.Component<{option:IDropMenuOption, onClick:(option:IDropMenuOption) => void,description?:string,icon?:string}>{\r\n render(){\r\n let option = this.props.option;\r\n let desc;\r\n if (this.props.description){\r\n desc = (
{this.props.description}
);\r\n }\r\n let icon;\r\n if (this.props.icon){\r\n icon =
\r\n }\r\n\r\n return
\r\n {icon}\r\n \r\n {option.label}\r\n {desc}\r\n
\r\n \r\n }\r\n\r\n handleClick = (e:React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n this.props.onClick(this.props.option);\r\n }\r\n}\r\n\r\nexport class MainMenuLink extends React.Component<{event:RenderEvent;page:string,label:string,description?:string,icon?:string}>{\r\n render(){\r\n\r\n let desc;\r\n if (this.props.description){\r\n desc = (
{this.props.description}
);\r\n }\r\n let icon;\r\n if (this.props.icon){\r\n icon =
\r\n }\r\n\r\n return
\r\n {icon}\r\n \r\n {this.props.label}\r\n {desc}\r\n
\r\n \r\n }\r\n\r\n handleClick = (e:React.MouseEvent
) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n let event = this.props.event;\r\n let page = this.props.page;\r\n if (!page) return;\r\n let app = event.canvas.app;\r\n event.canvas.closeMenu(e.target as HTMLElement);\r\n app.openWorkspace(page);\r\n \r\n }\r\n}\r\n\r\n","import React, { ReducerAction } from 'react';\r\nimport {RenderEvent} from 'core/RenderEvent';\r\nimport { Icon } from './Icon';\r\nimport { ActionRef, Application, Canvas, PageContainer, Url } from 'core';\r\nimport { BrowseNavigator } from './BrowseNavigator';\r\nimport { StackLayerContainer } from './helpers/StackLayerContainer';\r\nimport { TabSetPresenter } from './Tabs';\r\n\r\nimport { MainMenuLaunch } from './MainNavMenu';\r\nimport { Dialog } from 'core/Dialog';\r\nimport { TabSetState } from 'core/TabState';\r\n\r\n\r\nexport class Workspace extends React.Component<{event:RenderEvent,label:string,hideMenu?:boolean,$id?:string}>{\r\n \r\n\r\n tabState:TabSetState;\r\n\r\n constructor(props){\r\n super(props);\r\n this.tabState = new TabSetState();\r\n this.tabState.createTabs(props.children);\r\n\r\n }\r\n\r\n componentDidMount(){\r\n let canvas = this.props.event.canvas;\r\n let app = canvas.app;\r\n app.studioBroadcast.connect(this);\r\n app.workspaceTabState = this.tabState;\r\n if (app.currentWorkspaceContent){\r\n app.spinner.kill();\r\n Dialog.open(canvas,,null,\"dialog\");\r\n }\r\n }\r\n\r\n componentWillUnmount(){\r\n let app = this.props.event.canvas.app;\r\n app.studioBroadcast.disconnect(this);\r\n }\r\n\r\n render(){\r\n let content = this.renderContent(); \r\n return{content}
\r\n }\r\n\r\n renderContent(){\r\n let event = this.props.event;\r\n if (!event) return null;;\r\n let canvas = event.canvas;\r\n if (!canvas || !canvas.initialized){\r\n return \"Loading...\";\r\n }\r\n \r\n let covered:boolean;\r\n let stackContent = this.renderStackChild(canvas);\r\n if (stackContent){\r\n covered = true;\r\n }\r\n let title = this.props.label || canvas.title;\r\n let coveredTitle;\r\n let titleElem;\r\n if (this.props.hideMenu){\r\n titleElem = \r\n }\r\n else {\r\n titleElem = (
\r\n
\r\n \r\n {title}\r\n
\r\n );\r\n }\r\n \r\n if (covered){\r\n if (this.props.hideMenu){\r\n coveredTitle =
\r\n }\r\n else {\r\n coveredTitle =
\r\n }\r\n }\r\n let hideLabels = false; // event.canvas.app.codeDesignerEnabled ? true : false;\r\n\r\n let body = (
\r\n {this.props.children}\r\n )\r\n \r\n let sidebar;\r\n\r\n let navigator;\r\n if (canvas.recordBrowse){\r\n navigator =
\r\n }\r\n\r\n let label= this.props.label;\r\n if (!label){\r\n let event = this.props.event;\r\n if (event){\r\n label = event.canvas.title;\r\n }\r\n }\r\n let headerContent;\r\n\r\n return ();\r\n }\r\n \r\n renderStackChild(canvas:Canvas) {\r\n if (canvas.stackChild) {\r\n return canvas.stackChild();\r\n }\r\n return null;\r\n }\r\n\r\n closeLinkContent = () => {\r\n let canvas = this.props.event.canvas;\r\n canvas.app.currentWorkspaceContent = null;\r\n canvas.app.setWorkspaceUrl(true);\r\n this.forceUpdate();\r\n }\r\n \r\n \r\n}\r\n\r\nexport class WorkspaceLink extends React.Component<{event:RenderEvent,label:string,icon:string;activity:string,params:any,$id:string,\r\n action:ActionRef}>{\r\n render(){\r\n let canvas = this.props.event.canvas;\r\n let app = canvas.app;\r\n let actionName:string;\r\n if (this.props.action){\r\n actionName = this.props.action.name;\r\n }\r\n let isActive = canvas.app.isWorkspaceContent(actionName);\r\n let style:React.CSSProperties = {padding:\"6px 10px\",fontSize:\"14px\",borderRadius:4,letterSpacing:\"0.1px\",gap:10,display:\"flex\",alignItems:\"center\"};\r\n if (isActive){\r\n style.color = \"#0073ea\";\r\n style.backgroundColor = \"#dff0ff\";\r\n }\r\n else {\r\n style.color = \"rgb(50,51,52)\";\r\n style.backgroundColor = \"transparent\";\r\n }\r\n let icon = this.props.icon || \"folder\";\r\n let href = Url.stringify(app,app.currentWorkspace,app.currentWorkspaceLink);\r\n return \r\n \r\n {this.props.label}\r\n \r\n }\r\n\r\n handleClick = (e:React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n let action = this.props.action;\r\n if (action){\r\n let canvas = this.props.event.canvas;\r\n canvas.app.setWorkspaceScreen(canvas.app.currentWorkspace,action.name,{pushState:true});\r\n action.trigger();\r\n return;\r\n }\r\n }\r\n}\r\n\r\n\r\n\r\nclass WorkspaceNav extends React.Component<{event:RenderEvent,label:string}>{\r\n render(){\r\n let label = this.props.label || \"Workspace\";\r\n let single = label[0].toUpperCase();\r\n let labelBadgeBackground = \"rgb(10,81,87)\"; //rgb(242, 121, 242)\r\n return \r\n
\r\n
\r\n {this.props.children}\r\n
\r\n
\r\n
\r\n {elems}\r\n
\r\n \r\n
\r\n {activeMenu}\r\n
\r\n\r\n \r\n
\r\n
\r\n {this.renderMenuItems(this.props.store.activeSection)}\r\n
\r\n
{this.renderCaret()}
\r\n }\r\n else {\r\n\r\n }\r\n return \r\n {section.label}\r\n {caret}\r\n
\r\n }\r\n\r\n handleClick = (e:React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n this.props.store.handleSectionClick(this.props.section);\r\n }\r\n\r\n renderCaret(){\r\n return ();\r\n }\r\n}\r\n\r\nclass MenuItem extends React.Component<{store:MenuStore,item:IMenuItem}>{\r\n render(){\r\n let item = this.props.item;\r\n \r\n return \r\n {item.label}\r\n
\r\n }\r\n\r\n handleClick = (e:React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n this.props.store.handleMenuClick(this.props.item);\r\n }\r\n\r\n \r\n}","import { ClickThrottle } from 'components/helpers/ClickThrottle';\r\nimport {ActionRef, Broadcast, Canvas, CollectionRef, FieldRef, RenderEvent} from 'core';\r\nimport { Collection, CollectionSorter, ICollectionSortField } from 'core/Collection';\r\nimport { textChangeRangeIsUnchanged } from 'typescript';\r\n\r\ninterface IFilterOption {\r\n value:string;\r\n label:string;\r\n}\r\nexport type IFilterOptions = IFilterOption[];\r\n\r\n\r\nexport interface IProductRow {\r\n id:string;\r\n sku:string;\r\n size:string;\r\n size_sort:number;\r\n length:string;\r\n color:string;\r\n color_text:string;\r\n family:string;\r\n family_text:string;\r\n family_sort:number;\r\n profile:string;\r\n profile_text:string;\r\n profile_sort:number;\r\n qty_avail:number;\r\n qty_future:number;\r\n price:number;\r\n price1:number;\r\n price2:number;\r\n price3:number;\r\n cart_qty:number;\r\n pkg_size:number;\r\n details_visible:boolean;\r\n inbound:any;\r\n notes:any;\r\n}\r\n\r\ninterface ITheme {\r\n cartValueColor:string;\r\n cartValueWarningColor:string;\r\n cartCountBackground:string;\r\n circleCheckColor:string;\r\n filterCheckedBackground:string;\r\n filterCheckedFill:string;\r\n linkColor:string;\r\n headerBackgroundColor:string;\r\n headerFontSize:string;\r\n headerColor:string;\r\n bodyFontSize:string;\r\n}\r\n\r\ninterface ISettings {\r\n emptyStateMessage:string;\r\n productTitleSub:string;\r\n productTitleMain:string;\r\n pivotColumnLabel:string;\r\n assortedLabel:string;\r\n}\r\n\r\n\r\nexport var DefaultTheme:ITheme = {\r\n cartValueColor:\"#468ffd\", // \"rgb(130,0,114)\",\r\n cartValueWarningColor:\"#ff7713\",\r\n cartCountBackground:\"var(--rt-primary-bg-color)\", // \"rgb(130,0,114)\",\r\n circleCheckColor:\"rgb(7,136,0)\",\r\n filterCheckedBackground:\"rgb(241,253,227)\",\r\n filterCheckedFill:\"rgb(132, 195, 61)\",\r\n linkColor:\"#468ffd\",\r\n headerBackgroundColor :\"#84c33d\",\r\n headerFontSize:\"11px\",\r\n headerColor:\"#fff\",\r\n bodyFontSize:\"16px\"\r\n}\r\nexport class ProductTableStore {\r\n broadcast = new Broadcast();\r\n colors:string[] = [];\r\n\r\n profileImages:{[name:string]:string};\r\n colorOptions:any[];\r\n\r\n familyColors : {[name:string]:string[]};\r\n\r\n family:FieldRef;\r\n profile:FieldRef;\r\n color:FieldRef;\r\n available_date:FieldRef;\r\n selected_product_id:FieldRef;\r\n\r\n colorNames: {[name:string]:string};\r\n activeRowId:string;\r\n loaded:boolean;\r\n tableKey:number = 1;\r\n rows:IProductRow[];\r\n \r\n theme:ITheme;\r\n settings:ISettings;\r\n loadSidebarAction:ActionRef;\r\n rowMap:{[name:string]:IProductRow};\r\n clickThrottle = new ClickThrottle();\r\n canvas:Canvas;\r\n\r\n load(event:RenderEvent,collection:CollectionRef){\r\n this.rows = collection.rows;\r\n \r\n this.family = event.field(\"@family\");\r\n this.profile = event.field(\"@profile\");\r\n this.color = event.field(\"@color\");\r\n this.available_date = event.field(\"@available_date\");\r\n this.selected_product_id = event.field(\"@selected_product_id\");\r\n this.loadSidebarAction = event.action(\"load-sidebar\");\r\n\r\n let profileOptions = this.profile.options;\r\n this.profileImages = {};\r\n for(let i =0 ; i < profileOptions.length;i++){\r\n let profile = profileOptions[i] as any;\r\n if (profile.value){\r\n this.profileImages[profile.value] = profile.image;\r\n }\r\n }\r\n \r\n this.colorOptions = this.color.options;\r\n this.colorNames = {};\r\n for(let i = 0; i < this.colorOptions.length;i++){\r\n let c = this.colorOptions[i];\r\n if (c.value){\r\n this.colorNames[c.value] = c.label;\r\n }\r\n }\r\n let fc = event.canvas.getFieldRef(\"@family_colors\",{});\r\n this.familyColors = fc.value;\r\n \r\n this.formatData(collection.rows);\r\n this.loadTheme();\r\n let settingsField = event.canvas.getFieldRef(\"@settings\",{});\r\n\r\n this.settings = settingsField.value;\r\n }\r\n\r\n loadTheme(){\r\n this.theme = DefaultTheme;\r\n }\r\n\r\n loadSettings(){\r\n this.settings = {\r\n emptyStateMessage:\"Get started by selecting colors or choosing a product family.\",\r\n productTitleSub:\"Trex\",\r\n productTitleMain:\"Decking\",\r\n pivotColumnLabel:\"Available Qty By Color\",\r\n assortedLabel:\"Assorted Families\"\r\n }\r\n }\r\n\r\n handleCartChange = () => {\r\n /*\r\n let rows = this.rows;\r\n \r\n let count = 0;\r\n for(let i =0 ; i < rows.length;i++){\r\n let row = rows[i];\r\n if (row.cart_qty > 0){\r\n count++;\r\n }\r\n }\r\n */\r\n this.broadcast.refresh();\r\n }\r\n\r\n buildFamilyColors(family:string):string[]{\r\n let out:string[] = [];\r\n let colorSet:string[] = this.familyColors[family];\r\n for(let i = 0; i < colorSet.length;i++){\r\n let color = colorSet[i];\r\n if (this.colors.indexOf(colorSet[i]) != -1){\r\n out.push(color);\r\n }\r\n }\r\n return out;\r\n }\r\n\r\n get activeRow():IProductRow {\r\n if (this.activeRowId && this.rowMap){\r\n return this.rowMap[this.activeRowId];\r\n }\r\n return null;\r\n }\r\n\r\n get groupByFamily():boolean {\r\n if (this.colors && this.colors.length > 4) return true;\r\n if (this.family.value) return true;\r\n return false;\r\n }\r\n\r\n formatData(rows:any[]){\r\n let orderBy:ICollectionSortField[];\r\n if (this.groupByFamily){\r\n orderBy = [\r\n {name:\"family_sort\"},\r\n {name:\"profile_sort\"},\r\n {name:\"size_sort\"},\r\n {name:\"length\"},\r\n {name:\"color_sort\"}\r\n ];\r\n }\r\n else {\r\n orderBy = [\r\n {name:\"profile_sort\"},\r\n {name:\"family_sort\"},\r\n {name:\"size_sort\"},\r\n {name:\"length\"},\r\n {name:\"color_sort\"}\r\n ];\r\n }\r\n let schema = Collection.getSchema(rows);\r\n let sorter = new CollectionSorter(rows,schema,orderBy);\r\n sorter.executeSort();\r\n this.rows = rows;\r\n this.mapRows();\r\n this.activeRowId = null;\r\n }\r\n\r\n mapRows(){\r\n let rowMap = {};\r\n let rows = this.rows;\r\n for(let i = 0; i < rows.length;i++){\r\n let row = rows[i];\r\n rowMap[row.id] = row;\r\n }\r\n this.rowMap = rowMap;\r\n }\r\n\r\n handleColorChange = (value:string) => {\r\n let i = this.colors.indexOf(value);\r\n if (i == -1){\r\n this.colors.push(value);\r\n }\r\n else {\r\n this.colors.splice(i,1);\r\n }\r\n this.formatData(this.rows);\r\n this.tableKey++;\r\n this.broadcast.refresh();\r\n }\r\n\r\n handleSelectAll = ()=> {\r\n this.colors = [];\r\n if (this.family.value){\r\n let colorSet = this.familyColors[this.family.value];\r\n for(let i =0 ; i < colorSet.length;i++){\r\n this.colors.push(colorSet[i]);\r\n }\r\n }\r\n else {\r\n for(let key in this.colorNames){\r\n this.colors.push(key);\r\n }\r\n }\r\n this.formatData(this.rows);\r\n this.tableKey++;\r\n this.broadcast.refresh();\r\n }\r\n\r\n handleSelectNone = () => {\r\n this.colors = [];\r\n this.activeRowId = null;\r\n this.formatData(this.rows);\r\n this.tableKey++;\r\n this.broadcast.refresh();\r\n }\r\n\r\n handleFamilyFilterChange = (value:string) => {\r\n this.family.setValue(value);\r\n if (value){\r\n this.colors = [];\r\n if (value){\r\n let colorSet = this.familyColors[value];\r\n for(let i = 0; i < colorSet.length;i++){\r\n this.colors.push(colorSet[i]);\r\n }\r\n }\r\n }\r\n this.broadcast.refresh();\r\n }\r\n\r\n handleProfileFilterChange = (value:string) => {\r\n this.profile.setValue(value);\r\n this.broadcast.refresh();\r\n }\r\n\r\n setPrices(priceLevel:string){\r\n let rows = this.rows;\r\n if (priceLevel == \"price1\"){\r\n for(let i = 0; i < rows.length;i++){\r\n rows[i].price = rows[i].price1;\r\n }\r\n }\r\n else if (priceLevel == \"price2\"){\r\n for(let i = 0; i < rows.length;i++){\r\n rows[i].price = rows[i].price2;\r\n }\r\n }\r\n else if (priceLevel == \"price3\"){\r\n for(let i = 0; i < rows.length;i++){\r\n rows[i].price = rows[i].price3;\r\n }\r\n }\r\n else {\r\n for(let i = 0; i < rows.length;i++){\r\n rows[i].price = 0;\r\n }\r\n }\r\n }\r\n\r\n handleSelectCell = async (row:IProductRow) => {\r\n\r\n this.activeRowId = row.id;\r\n let selectedField = this.canvas.getFieldRef(\"@selected_product_id\",null);\r\n if (selectedField){\r\n selectedField.setValue(row.sku);\r\n }\r\n this.broadcast.refresh();\r\n \r\n // this.fetchSidebar(row);\r\n }\r\n\r\n addToCart(row:IProductRow,qty:number){\r\n //row.cart_qty = qty;\r\n //this.handleCartChange();\r\n }\r\n\r\n parseQty(value:string):number {\r\n if (!value) return 0;\r\n return parseInt(value,10);\r\n }\r\n\r\n\r\n async fetchSidebar(row:IProductRow){\r\n this.loadSidebarAction.trigger({scope:{\"@items\":row}});\r\n }\r\n}","import React from 'react';\r\nimport { Icon } from '../Icon';\r\nimport { ProductTableStore } from './ProductTableStore';\r\n\r\nexport class FilterItem extends React.Component<{ store: ProductTableStore; label: string; value: string; disabled?: boolean; onChange: (value: string) => void; }> {\r\n render() {\r\n let icon;\r\n let style: React.CSSProperties = { fontSize: \"14px\" };\r\n let iconOpacity;\r\n let cursor = \"pointer\";\r\n let backgroundColor;\r\n if (this.props.disabled) {\r\n style.opacity = 0.5;\r\n iconOpacity = 0.25;\r\n cursor = null;\r\n }\r\n else {\r\n backgroundColor = \"#fff\";\r\n }\r\n let store = this.props.store;\r\n let checked = store.colors.indexOf(this.props.value) != -1;\r\n let boxBackground;\r\n let boxBorder;\r\n \r\n if (checked) {\r\n icon = \r\n \r\n
;\r\n style.fontWeight = 500;\r\n backgroundColor = store.theme.filterCheckedBackground;\r\n boxBackground = store.theme.filterCheckedFill;\r\n boxBorder = \"solid 1px \" + store.theme.filterCheckedFill;\r\n }\r\n else {\r\n boxBorder = \"solid 1px #000\";\r\n }\r\n return \r\n
\r\n {icon}\r\n
\r\n
{this.props.label}
\r\n
\r\n
\r\n
{this.props.label}
\r\n
ALL|\r\n
CLEAR\r\n
\r\n
{this.props.children}
\r\n
- | ;\r\n }\r\n\r\n\r\n if (row.cart_qty > 0) {\r\n let fill = (value >= row.cart_qty) ? store.theme.cartValueColor: store.theme.cartValueWarningColor;\r\n let icon = ;\r\n return (\r\n \r\n\r\n {NumberFormatter.formatNumber(row.cart_qty)} \r\n {icon} \r\n | );\r\n }\r\n else if (value > 0) {\r\n let icon = ;\r\n return (\r\n \r\n\r\n {NumberFormatter.formatNumber(value)} \r\n {icon} \r\n | );\r\n }\r\n else {\r\n let formatted = (value == 0) ? '\\u00A0' : NumberFormatter.formatNumber(value);\r\n return {formatted} | ;\r\n }\r\n }\r\n\r\n handleClick = (e: React.MouseEvent) => {\r\n this.props.store.clickThrottle.handle(e,null,()=> {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n if (this.props.row) {\r\n this.props.onSelectCell(this.props.row);\r\n }\r\n });\r\n };\r\n}\r\n","import React from 'react';\r\nimport { IProductRow, ProductTableStore } from './ProductTableStore';\r\nimport { CellValue } from './CellValue';\r\n\r\nexport class PivotList extends React.Component<{ store:ProductTableStore,count: number; values: IProductRow[]; style: React.CSSProperties; showAvailOnly: boolean; activeRow: IProductRow; onSelectCell: (row: IProductRow) => void; }> {\r\n render() {\r\n let values = this.props.values;\r\n if (!values)\r\n return null;\r\n let elems = [];\r\n let isActive: boolean;\r\n let store = this.props.store;\r\n for (let i = 0; i < this.props.count; i++) {\r\n let row = values[i];\r\n\r\n let style = this.props.style;\r\n if (i == this.props.count - 1) {\r\n style = { ...style, borderRight: null };\r\n }\r\n if (row) {\r\n isActive = (this.props.activeRow == row);\r\n }\r\n else {\r\n isActive = false;\r\n }\r\n elems.push();\r\n }\r\n return elems;\r\n }\r\n}\r\n","import React from 'react';\r\nimport { IFilterOptions } from './ProductTableStore';\r\n\r\nexport class SingleValueFilter extends React.Component<{ value: string; label: string; options: IFilterOptions; onChange: (value: string) => void; }> {\r\n render() {\r\n let style: React.CSSProperties = { padding: \"4px 8px\", width: \"100%\" };\r\n if (this.props.value) {\r\n style.fontWeight = 500;\r\n }\r\n let labelStyle: React.CSSProperties = { fontSize: \"13px\", textTransform: \"uppercase\", fontWeight: 500, marginBottom: 5 };\r\n let optionElems = [];\r\n let options = this.props.options;\r\n for (let i = 0; i < options.length; i++) {\r\n let option = options[i];\r\n optionElems.push();\r\n }\r\n return \r\n
{this.props.label}
\r\n
\r\n
{this.props.children}
;\r\n }\r\n}\r\n","import { Icon } from 'components/Icon';\r\nimport { ActionRef, Application, RenderEvent } from 'core';\r\nimport React from 'react';\r\nimport { TextBox } from '../display/TextBox';\r\nimport { DefaultTheme, ProductTableStore } from './ProductTableStore';\r\n\r\n\r\nexport class ProductTitleBar extends React.Component<{ event:RenderEvent,store: ProductTableStore; }> {\r\n render() {\r\n\r\n let cart;\r\n let store = this.props.store;\r\n let app = Application.instance;\r\n /*\r\n if (app.cart.cart_id){\r\n let cartItemCount = app.cart.cart_item_count;\r\n cart = (\r\n
\r\n
\r\n \r\n
\r\n
\r\n {app.cart.cart_name}\r\n
\r\n
\r\n
\r\n
\r\n {cartItemCount}\r\n
\r\n
\r\n
\r\n \r\n
\r\n */\r\n\r\n let title = settings.productTitleSub + \" \" + settings.productTitleMain;\r\n return (\r\n \r\n
\r\n
\r\n
{title}
\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n {cart}\r\n
\r\n
\r\n
\r\n \r\n
)\r\n }\r\n \r\n if (this.props.cartName){\r\n let cartItemCount;\r\n if (this.props.cartItemCount && this.props.cartItemCount !== \"0\"){\r\n /*\r\n cartItemCount = (\r\n
\r\n {cartItemCount}\r\n
\r\n
\r\n
\r\n Checkout {this.props.cartItemCount} {countText}\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n {this.props.cartName}\r\n {cartItemCount}\r\n
\r\n
\r\n {this.props.branchName}\r\n
\r\n
\r\n {closeIcon}\r\n
\r\n \r\n
\r\n
{row.family_text}
\r\n
\r\n
|
\r\n {tbody}\r\n |
\r\n );\r\n let profileFontSize = groupByFamily ? \"16px\" : \"17px\";\r\n let img; // (})
);\r\n profileContent = (\r\n \r\n {row.profile_text} \r\n {img}\r\n | )\r\n sameProduct = false;\r\n shadeBody = !shadeBody;\r\n }\r\n else {\r\n if (row.family != last.family){\r\n tbody.push( |
);\r\n sameProduct = false;\r\n }\r\n else if (row.size != last.size || row.length != last.length){\r\n sameProduct = false;\r\n }\r\n }\r\n if (!sameProduct){\r\n colorValues = [];\r\n rowOptions = {};\r\n let tdStyle:React.CSSProperties = {\r\n padding:\"1px 12px\"\r\n }\r\n let numStyle:React.CSSProperties = {\r\n padding:\"1px 12px\",\r\n textAlign:\"right\"\r\n }\r\n let qtyStyle:React.CSSProperties = {\r\n textAlign:\"right\",\r\n borderLeft:\"solid 1px rgb(178 228 122)\"\r\n\r\n }\r\n let familyText\r\n if (!groupByFamily){\r\n familyText = row.family_text;\r\n }\r\n // {FieldFormatter.format(row.price,\"money\")} | \r\n let sizeStyle:React.CSSProperties = {...tdStyle,whiteSpace:\"nowrap\"};\r\n tbody.push(\r\n {profileContent}\r\n {row.size} x {row.length}' | \r\n {familyText} | \r\n \r\n \r\n );\r\n }\r\n \r\n let colorIndex = colorSet.indexOf(row.color);\r\n colorValues[colorIndex] = row;\r\n if (store.activeRow && row == store.activeRow){\r\n rowOptions.className = \"is-active-row\";\r\n }\r\n \r\n last = row;\r\n }\r\n \r\n return \r\n
\r\n \r\n
\r\n
\r\n
\r\n \r\n {this.renderColorFilter(store,familyFilter)}\r\n \r\n
\r\n
\r\n
\r\n
\r\n {tables}\r\n
\r\n
\r\n {this.renderSidebar(store,isEmpty)}\r\n
\r\n
{sidebar}
)\r\n /*\r\n let sidebarContent;\r\n let sidebarBackground;\r\n if (store.activeRow){\r\n sidebarContent = \r\n sidebarBackground = \"rgb(251,251,252)\";\r\n }\r\n else if (!isEmpty){\r\n sidebarContent = \r\n sidebarBackground = \"rgb(234,236,240)\";\r\n }\r\n \r\n if (sidebarContent){\r\n return( \r\n {sidebarContent}\r\n
);\r\n }\r\n return null;\r\n */\r\n }\r\n\r\n getImageUrl(profile:string):string {\r\n \r\n return imageBase + this.store.profileImages[profile];\r\n }\r\n\r\n renderTableHeader(colors:string[]){\r\n let colorHeaders = [];\r\n let theme = this.store.theme;\r\n let thStyle:React.CSSProperties = {\r\n backgroundColor:theme.headerBackgroundColor,\r\n color:theme.headerColor,\r\n fontSize:theme.headerFontSize,\r\n letterSpacing:\"1px\",\r\n textTransform:\"uppercase\",\r\n textAlign:'center',\r\n padding:\"8px 8px\",\r\n borderRight:\"solid 3px #fff\"\r\n }\r\n\r\n let last = {...thStyle,borderRight:null};\r\n let profileStyle = {...thStyle,minWidth:210};\r\n let descripStyle = {...thStyle,minWidth:280};\r\n let store = this.store;\r\n\r\n for(let i = 0 ; i < colors.length;i++){\r\n let colorStyle = {...thStyle,color:\"#000\",backgroundColor:\"#fff\",borderTop:\"solid 2px #fff\",verticalAlign:\"bottom\",\r\n borderRight:\"solid 3px #fff\",padding:null,fontSize:\"13px\",textTransform:null,letterSpacing:0,minWidth:105};\r\n if (i == colors.length -1){\r\n colorStyle.borderRight = null;\r\n }\r\n colorHeaders.push({store.colorNames[colors[i]]} | )\r\n }\r\n \r\n return (\r\n \r\n | Profile | \r\n Description | \r\n {store.settings.pivotColumnLabel} | \r\n
\r\n \r\n | \r\n \r\n {colorHeaders}\r\n |
\r\n )\r\n }\r\n\r\n}\r\n\r\n\r\n\r\n\r\n","import React from 'react';\r\nimport {ActionRef, FieldRef, RecordMeta, RenderEvent} from 'core';\r\nimport {Icon} from 'components/Icon';\r\nimport { NumberFormatter } from 'core/FieldFormatter';\r\nimport {IProductRow, ProductTableStore} from './ProductTableStore';\r\n\r\ninterface ICartItem {\r\n product_descrip:string;\r\n cart_qty:number;\r\n price:number;\r\n category:string;\r\n avail_to_ship:number;\r\n backorder_qty:number;\r\n backorder_date:string;\r\n backorder_note:string;\r\n max_backorder_date:string;\r\n $$meta:RecordMeta;\r\n}\r\n\r\nexport class CartItem extends React.Component<{event:RenderEvent,store:ProductTableStore; item:ICartItem,row:IProductRow,actions:any}>{\r\n\r\n render(){\r\n let cardStyle:React.CSSProperties = {backgroundColor:\"#fff\",boxShadow:\"0 2px 13px 0px rgba(232,233,234,0.7)\",\r\n padding:15,borderRadius:4,flexGrow:1};\r\n \r\n let item = this.props.item;\r\n let backOrderElem;\r\n let itemNote;\r\n let backorderFlag;\r\n if (item.backorder_note){\r\n itemNote = this.renderNote(item.backorder_note);\r\n backorderFlag = *\r\n }\r\n\r\n if (item.backorder_qty){\r\n backOrderElem = ( \r\n
\r\n Back order\r\n
\r\n
{NumberFormatter.formatNumber(item.backorder_qty)}{backorderFlag}
\r\n
\r\n
\r\n
\r\n
\r\n {item.product_descrip}\r\n
\r\n
\r\n {item.category}\r\n
\r\n
\r\n \r\n
\r\n
\r\n Order Qty\r\n
\r\n
{NumberFormatter.formatNumber(item.cart_qty)}
\r\n
\r\n\r\n
\r\n
\r\n Avail To Ship\r\n
\r\n
{NumberFormatter.formatNumber(item.avail_to_ship,\"#,##0;-\")}
\r\n
\r\n {backOrderElem}\r\n \r\n
\r\n
\r\n
\r\n Price\r\n
\r\n
{NumberFormatter.formatMoney(item.price)}/pc
\r\n
\r\n {this.props.actions}\r\n
\r\n
\r\n {itemNote}\r\n
\r\n {rowIndex}\r\n
)\r\n return (\r\n {rowIndexElem}\r\n {card}\r\n
)\r\n }\r\n\r\n renderNote(message:string){\r\n \r\n return \r\n NOTE:\r\n {message}\r\n
\r\n }\r\n\r\n handleClick = (e:React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n let store = this.props.store;\r\n let row = this.props.row;\r\n store.activeRowId = row.id;\r\n store.loadSidebarAction.trigger({scope:{\"@inventory\":row}});\r\n store.broadcast.refresh();\r\n }\r\n\r\n}\r\n\r\nexport class DataCard extends React.Component<{event:RenderEvent,icon?:string,label:string,onClick?:ActionRef}>{\r\n render(){\r\n let iconElem;\r\n let labelElem;\r\n\r\n if (this.props.icon){\r\n iconElem = \r\n \r\n
\r\n }\r\n labelElem = \r\n {this.props.label}\r\n
\r\n return (\r\n
\r\n {iconElem}\r\n
\r\n {labelElem}\r\n {this.props.children}\r\n
\r\n
\r\n
Checking...
\r\n }\r\n \r\n let cartButtonOpacity = 1;\r\n let cartButtonDisabled = false;\r\n \r\n if (store.parseQty(this.state.editValue) == (row.cart_qty || 0)) {\r\n cartButtonOpacity = 0.5;\r\n cartButtonDisabled = true;\r\n }\r\n\r\n let price2;\r\n if (row.price2){\r\n price2 = (\r\n
Unit+
\r\n
{NumberFormatter.formatMoney(row.price2)}/pc
\r\n
\r\n
{row.color_text}
\r\n\r\n
\r\n {row.size}\r\n x {row.length}'\r\n
\r\n
{row.profile_text}
\r\n
{row.family_text}
\r\n
\r\n
\r\n
Less than unit
\r\n
{NumberFormatter.formatMoney(row.price1)}/pc
\r\n
\r\n {price2}\r\n
\r\n
Immediate Available Qty
\r\n
{NumberFormatter.formatNumber(row.qty_avail,\"#,##0;0\")}
{qtyIcon}
\r\n \r\n \r\n
\r\n
Unit Size
\r\n
{row.pkg_size} pcs/unit
\r\n
\r\n \r\n
Order Qty
\r\n
\r\n\r\n \r\n\r\n \r\n
\r\n {future}\r\n
SKU
\r\n
{row.sku}
\r\n
\r\n
\r\n MFG ITEM NUMBER
\r\n {row.id}
\r\n {this.renderNotes(row.notes)}\r\n \r\n
\r\n
\r\n
{DateFormatter.format(line.expected_date,\"mmm d\")}
\r\n
+{NumberFormatter.formatNumber(line.qty)}
\r\n
{NumberFormatter.formatNumber(availQty)}
\r\n
{icon}
\r\n
No future stock
;\r\n }\r\n\r\n return (<>\r\n \r\n
Future Stock
\r\n
Available Qty
\r\n
{notes[i].text}
)\r\n }\r\n return {elems}
\r\n }\r\n\r\n handleKeyPress = (e: React.KeyboardEvent) => {\r\n if (e.key == \"Enter\") {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n let qty = this.props.store.parseQty(this.state.editValue);\r\n this.addToCart(qty);\r\n }\r\n };\r\n\r\n handleAddToCart = async (e: React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n let qty = this.props.store.parseQty(this.state.editValue);\r\n this.addToCart(qty);\r\n \r\n };\r\n\r\n async addToCart(qty:number){\r\n let row = this.props.row;\r\n let store = this.props.store;\r\n let event = this.props.event;\r\n let current_cart_id = event.canvas.app.cart.cart_id;\r\n if (!current_cart_id){\r\n let getOrCreate = event.action(\"get-or-create-cart\");\r\n let getResult = await getOrCreate.trigger();\r\n if (!getResult.continue) return;\r\n }\r\n row = store.activeRow;\r\n let action = event.action(\"add-to-cart\");\r\n await action.trigger({scope:{\"@cart_item\":{\"product_id\":row.sku,qty}}});\r\n row = store.activeRow;\r\n store.addToCart(row, qty);\r\n }\r\n\r\n handleChange = (e: React.ChangeEvent) => {\r\n this.setState({ editValue: e.target.value });\r\n };\r\n\r\n handleToggleShowDetails = () => {\r\n let row = this.props.row;\r\n row.details_visible = !row.details_visible;\r\n this.forceUpdate();\r\n };\r\n}\r\n","import React from 'react';\r\nimport {IProductRow, ProductTableStore} from './ProductTableStore';\r\nimport { RenderEvent } from 'core';\r\nimport { Sidebar } from './Sidebar';\r\nimport { EmptyState } from 'components/EmptyState';\r\nimport { CartItem } from './CartItem';\r\nimport { ScreenRef } from 'core/ActionEvent';\r\n\r\n\r\nexport class CartDetail extends React.Component<{event:RenderEvent}>{\r\n\r\n loaded = false;\r\n store:ProductTableStore = new ProductTableStore();\r\n inventoryCollectionName = \"@inventory\";\r\n\r\n componentDidMount(){\r\n this.store.broadcast.connect(this);\r\n this.loadData();\r\n this.loaded = true;\r\n let canvas = this.props.event.canvas;\r\n let collection = this.props.event.canvas.getCollectionRef(this.inventoryCollectionName,null);\r\n canvas.connectDataListener(this,collection.name,()=> {\r\n let col = canvas.getCollectionRef(this.inventoryCollectionName,null);\r\n this.store.rows = col.rows;\r\n this.store.mapRows();\r\n });\r\n this.forceUpdate();\r\n }\r\n\r\n componentWillUnmount(){\r\n this.store.broadcast.disconnect(this);\r\n let canvas = this.props.event.canvas;\r\n canvas.disconnectDataListener(this);\r\n }\r\n\r\n loadData(){\r\n let store = this.store;\r\n let event = this.props.event;\r\n store.loadSidebarAction = event.action(\"load-sidebar\");\r\n store.loadTheme();\r\n let collection = event.canvas.getCollectionRef(this.inventoryCollectionName,null);\r\n store.rows = collection.rows;\r\n store.mapRows();\r\n store.setPrices(\"price1\");\r\n store.addToCart = async (row:IProductRow,qty:number) => {\r\n store.activeRowId = null;\r\n let screenRef = new ScreenRef(event.canvas,{});\r\n await screenRef.restart();\r\n event.canvas.update();\r\n }\r\n }\r\n\r\n render(){\r\n let store = this.store;\r\n let isEmpty:boolean;\r\n if (!this.loaded) return null;\r\n\r\n return ( \r\n
\r\n
\r\n {this.renderMessage()}\r\n {this.renderCartItems()}\r\n
\r\n
\r\n {this.renderSidebar(store,isEmpty)}\r\n
\r\n NOTE:\r\n {message}\r\n
\r\n }\r\n\r\n\r\n renderCartItems(){\r\n let event = this.props.event;\r\n let canvas = event.canvas;\r\n let collection = canvas.getCollectionRef(\"@items\",null);\r\n let elems = [];\r\n let rows = collection.rows;\r\n if (!rows || !rows.length){\r\n return \r\n }\r\n for(let i =0 ; i < rows.length;i++){\r\n let row = rows[i];\r\n let productRow = this.findStoreRow(row.product_id);\r\n if (productRow){\r\n productRow.price = row.price;\r\n let data:any = row;\r\n if (i){\r\n elems.push();\r\n }\r\n let rowElem =
\r\n elems.push(rowElem);\r\n }\r\n }\r\n return elems;\r\n }\r\n\r\n findStoreRow(product_id:string):IProductRow {\r\n let rows = this.store.rows;\r\n for(let i = 0; i < rows.length;i++){\r\n let row = rows[i];\r\n if (row.sku == product_id){\r\n return row;\r\n }\r\n }\r\n return null;\r\n }\r\n\r\n renderSidebar(store:ProductTableStore,isEmpty:boolean){\r\n \r\n let sidebarContent;\r\n let sidebarBackground;\r\n if (store.activeRow){\r\n sidebarContent = \r\n sidebarBackground = \"rgb(251,251,252)\";\r\n }\r\n else if (!isEmpty){\r\n sidebarContent = \r\n sidebarBackground = \"rgb(234,236,240)\";\r\n }\r\n \r\n if (sidebarContent){\r\n return( \r\n {sidebarContent}\r\n
);\r\n }\r\n return null;\r\n }\r\n}","import { Icon } from 'components/Icon';\r\nimport React from 'react';\r\n\r\nexport class DataViewTabs extends React.Component<{dataViews:any,grid:any}>{\r\n render(){\r\n let tabs = [];\r\n let dataViews = this.props.dataViews;\r\n let activeView = this.props.grid.getActiveView();\r\n\r\n if (dataViews){\r\n for (let i = 0; i < dataViews.length;i++){\r\n let dataView = dataViews[i];\r\n let isActive = (dataView.name == activeView);\r\n let label = \r\n
\r\n {dataView.label}
\r\n \r\n {this.props.tabs}\r\n
\r\n }\r\n if (this.props.hideLabels){\r\n className += \" RT-TabSet--hide-labels\";\r\n }\r\n return \r\n {tabs}\r\n {this.props.panels}\r\n
\r\n \r\n }\r\n}","\r\nimport React from 'react';\r\nimport {makeComponent, RenderEvent} from '../core';\r\nimport { DataViewTabs } from './data-table/DataViewTabs';\r\n\r\n export const SearchPanel = makeComponent(class extends React.Component<{event:RenderEvent}>{\r\n render() {\r\n let canvas = this.props.event.canvas;\r\n\r\n let dataViewTabs = \r\n return <>\r\n \r\n {this.props.children}\r\n
\r\n {dataViewTabs}\r\n \r\n\r\n }\r\n});","import React from 'react';\r\nimport { FieldRef, makeComponent } from \"core\";\r\n\r\nexport const CodeBlock = makeComponent(class extends React.Component<{field:FieldRef}>{\r\n\r\n render(){\r\n let field = this.props.field;\r\n if (!field) return null;\r\n return ({field.value});\r\n \r\n }\r\n\r\n \r\n\r\n \r\n});","import { ScreenRef } from \"../core/ActionEvent\";\r\nimport {Application, Request} from '../core';\r\nexport class LISAApi {\r\n\r\n static async doPostRequest(path:string,body:any):Promise{\r\n let app = Application.instance;\r\n let url = app.qualifyUri(path);\r\n let info:any = {\r\n method:\"POST\",\r\n credentials:\"include\",\r\n headers:{\r\n 'Content-Type':'application/json'\r\n },\r\n body:JSON.stringify(body,LISAApi.replacer)\r\n };\r\n let res = await fetch(url,info);\r\n let json = await res.json();\r\n if (json && json.debug){\r\n let studioWindow = Application.instance.studioWindow;\r\n if (studioWindow){\r\n studioWindow.postMessage({action:\"addDebugEntry\",entry:json.debug},\"*\");\r\n }\r\n }\r\n return json;\r\n }\r\n\r\n static replacer(key, value) {\r\n if (key[0] == \"$\" && key[1] == \"$\") return undefined;\r\n return value;\r\n }\r\n \r\n \r\n\r\n \r\n}\r\n\r\n\r\n\r\n\r\n\r\n","import { Application, PageContainer, Url } from '../core';\r\nimport React from 'react';\r\nimport { ISessionResult } from 'core/AppSession';\r\nimport { Dialog, DialogContainer, DialogResult, ErrorDialogContainer } from 'core/Dialog';\r\nimport { IPageLaunchParams } from 'core/types';\r\nimport { DragImage, DropBar } from 'core/DragState';\r\n\r\n\r\n\r\nexport class Navigator extends React.Component<{appName:string,domain:string,branch?:string;screenProps:any,screenName?:boolean}>{\r\n\r\n ready = false; \r\n loadError = null;\r\n\r\n\r\n async componentDidMount(){\r\n let app = Application.instance;\r\n app.pageNavigate.connect(this);\r\n app.domain = this.props.domain;\r\n app.appName = this.props.appName;\r\n app.branch = this.props.branch;\r\n window.addEventListener(\"message\",this.handleMessage);\r\n window.addEventListener(\"popstate\",this.handlePopState);\r\n \r\n\r\n let result = await this.start();\r\n if (result){\r\n let windowUrl = Url.parse(document.location.pathname,document.location.search);\r\n if (windowUrl.search[\"pwdtoken\"]){\r\n return; // do not display any page\r\n }\r\n \r\n /*\r\n if (result.didSignin){\r\n window.location.reload();\r\n return;\r\n }\r\n */\r\n\r\n this.ready = true;\r\n\r\n if (!app.currentWorkspace && app.session.homePage){\r\n app.openWorkspace(app.session.homePage);\r\n return;\r\n }\r\n else {\r\n this.forceUpdate();\r\n }\r\n }\r\n else {\r\n this.forceUpdate();\r\n }\r\n }\r\n\r\n \r\n componentWillUnmount(){\r\n Application.instance.pageNavigate.disconnect(this);\r\n window.removeEventListener(\"message\",this.handleMessage);\r\n }\r\n render(){\r\n let app = Application.instance;\r\n if (this.loadError){\r\n return (\r\n \r\n \r\n
\r\n )\r\n }\r\n\r\n \r\n\r\n let page:IPageLaunchParams = {name:\"pages/user/theme\"};\r\n \r\n let content = (this.ready) ? : null;\r\n return <>\r\n \r\n {content}\r\n \r\n \r\n \r\n \r\n
\r\n \r\n }\r\n\r\n handleMessage = (event) => {\r\n let data = event.data;\r\n let action = data.action;\r\n if (action == \"studio.ready\"){\r\n Application.instance.studioWindow = event.source;\r\n Application.instance.studioOpen = true;\r\n let activeScreen = Application.instance.activeScreens[0];\r\n if (activeScreen && activeScreen.canvas.pageId){\r\n Application.instance.studioWindow.postMessage({action:\"showScreen\",screen:activeScreen.canvas.launchParams.name},\"*\");\r\n }\r\n }\r\n else if (action = \"screen.reload\"){\r\n let screen = data.screen;\r\n Application.instance.reloadScreen(screen);\r\n }\r\n }\r\n\r\n handlePopState = (event:PopStateEvent) => {\r\n \r\n let app = Application.instance;\r\n app.setWorkspaceUrl(false);\r\n return;\r\n /*\r\n let url = Url.parse(document.location.pathname,document.location.search);\r\n app.openWorkspace(\"user/workspaces/\" + url.folder);\r\n this.forceUpdate();\r\n */\r\n }\r\n\r\n async start():Promise{\r\n\r\n \r\n let app = Application.instance;\r\n let result:DialogResult;\r\n\r\n let res:any;\r\n try {\r\n res = await Application.instance.doPostRequest(\"/bootstrap\",{domain:app.domain,branch:app.branch});\r\n this.loadConfig(app,res);\r\n let windowUrl = Url.parse(document.location.pathname,document.location.search);\r\n let params = {\"@pathname\":document.location.pathname};\r\n if (windowUrl.search){\r\n for(let key in windowUrl.search){\r\n params[\"@\" + key] = windowUrl.search[key];\r\n }\r\n }\r\n result = await app.session.signin(app,null,{},params);\r\n if (!result.continue){\r\n // this.loadError = \"Unable to log in\";\r\n return result;\r\n }\r\n }\r\n catch(e){\r\n let err = e as Error;\r\n if (err && err.message){\r\n this.loadError = err.message\r\n }\r\n return;\r\n }\r\n\r\n if (!res) {\r\n this.loadError = \"Unable to communicate with server at the moment...\";\r\n return;\r\n }\r\n \r\n\r\n Navigator.pingInterval = setInterval(()=> {\r\n app.session.ping();\r\n },5 * 60 * 1000); \r\n return result;\r\n }\r\n \r\n private loadConfig(app:Application,res:any){\r\n let config = res.config;\r\n if (config){\r\n let components = config.components;\r\n for(let i = 0 ; i < components.length;i++){\r\n let component = components[i];\r\n let componentClass = Application.components[component.name] as any;\r\n if (componentClass){\r\n componentClass.$def = component;\r\n }\r\n }\r\n }\r\n app.version = res.version;\r\n app.portalTitle = res.portalTitle;\r\n }\r\n\r\n static pingInterval;\r\n\r\n}\r\n\r\n\r\n\r\n\r\nclass StartupError extends React.Component<{message:string}>{\r\n render(){\r\n return \r\n {this.props.message}\r\n
\r\n \r\n
\r\n
\r\n {this.renderLogo()}\r\n {this.renderContent()}\r\n
\r\n );\r\n */\r\n }\r\n\r\n closePage = ()=> {\r\n let result:ISessionResult = {success:true};\r\n this.props.done(result);\r\n }\r\n\r\n submit = async e => {\r\n e.preventDefault();\r\n let app = this.props.app;\r\n try {\r\n this.setState({ busy: true });\r\n let result = await app.session.attemptSignin(this.state.username, this.state.password);\r\n this.setState({ busy: false });\r\n if (result.success){\r\n return this.props.done(result);\r\n }\r\n else {\r\n this.setState({error:result.error});\r\n }\r\n } catch (e) {\r\n let error = this.getErrorMessage(e);\r\n this.setState({ error, busy: false });\r\n }\r\n };\r\n\r\n getErrorMessage(e: any): string {\r\n if (!e.body || !e.body.error || !e.body.error.message) {\r\n return \"An error occurred, unable to \" + this.submitLabel;\r\n }\r\n return e.body.error.message;\r\n }\r\n requestToken = (requestType: string) => async e => {\r\n e.preventDefault();\r\n let app = this.props.app;\r\n try {\r\n this.setState({ busy: true });\r\n let result= await app.session.requestToken(this.state.username);\r\n if (result.success){\r\n this.setState({ mode: requestType, busy: false, error: \"\" });\r\n }\r\n else {\r\n this.setState({ error:result.error, busy: false });\r\n }\r\n } catch (e) {\r\n let error = this.getErrorMessage(e);\r\n this.setState({ error, busy: false });\r\n }\r\n };\r\n\r\n signup = e => {\r\n e.preventDefault();\r\n };\r\n resetPassword = async e => {\r\n e.preventDefault();\r\n\r\n let app = this.props.app;\r\n try {\r\n this.setState({ busy: true });\r\n let result = await app.session.resetPassword(this.props.token, this.state.password);\r\n if (!result.success) {\r\n this.setState({\r\n busy: false,\r\n error: result.error\r\n });\r\n return;\r\n }\r\n this.setState({\r\n mode: \"login\",\r\n busy: false,\r\n password: \"\",\r\n error: \"\"\r\n });\r\n } catch (e) {\r\n let error = this.getErrorMessage(e);\r\n this.setState({ error, busy: false });\r\n }\r\n };\r\n handleInputChange = e => {\r\n let name: \"username\" | \"password\" | \"confirmPassword\" =\r\n e.target.name;\r\n var value = e.target.value;\r\n let stateChange = { [name]: value };\r\n this.setState(stateChange as any);\r\n };\r\n\r\n handleRegisterClick = e => {\r\n e.preventDefault();\r\n this.setState({\r\n mode: \"register\",\r\n error: \"\",\r\n password: \"\",\r\n confirmPassword: \"\"\r\n });\r\n };\r\n handleForgotClick = e => {\r\n e.preventDefault();\r\n this.setState({\r\n mode: \"forgot\",\r\n error: \"\",\r\n password: \"\",\r\n confirmPassword: \"\"\r\n });\r\n };\r\n handleReturnToLoginClick = e => {\r\n e.preventDefault();\r\n this.setState({\r\n mode: \"login\",\r\n error: \"\",\r\n password: \"\",\r\n confirmPassword: \"\"\r\n });\r\n };\r\n\r\n renderContent() {\r\n var mode = this.state.mode;\r\n if (mode == \"login\") {\r\n return this.renderLoginScreen();\r\n } else if (mode == \"register\") {\r\n return this.renderRegister();\r\n } else if (mode == \"forgot\") {\r\n return this.renderForgot();\r\n } else if (mode == \"requestregister\") {\r\n return this.renderRequestSent(\"requestregister\");\r\n } else if (mode == \"requestforgot\") {\r\n return this.renderRequestSent(\"requestforgot\");\r\n } else if (mode == \"reset\") {\r\n return this.renderReset();\r\n }\r\n else if (mode == \"welcome\"){\r\n return this.renderWelcome();\r\n }\r\n }\r\n\r\n renderLoginScreen() {\r\n let assistanceLink;\r\n if (this.supportLinkHref) {\r\n assistanceLink = (\r\n {this.supportLinkLabel}\r\n );\r\n } else {\r\n assistanceLink = this.supportLinkLabel;\r\n }\r\n let assistance = (\r\n \r\n
Need assistance?
\r\n
{assistanceLink}
\r\n
{this.state.error}
\r\n );\r\n }\r\n return null;\r\n }\r\n\r\n renderRegister() {\r\n //this.requestToken(\"requestregister\")\r\n return (\r\n \r\n );\r\n }\r\n\r\n renderForgot() {\r\n let submitButton;\r\n if (this.state.busy) {\r\n submitButton = (\r\n \r\n Working ...\r\n \r\n );\r\n } else {\r\n submitButton = (\r\n \r\n );\r\n }\r\n return (\r\n \r\n );\r\n }\r\n\r\n renderLogo() {\r\n if (this.logoFile) {\r\n var src = Application.instance.getImageUrl(this.logoFile);\r\n return 
\r\n
Activate your new portal account.
\r\n
Username
\r\n
{this.state.username}
\r\n
\r\n
Data view
\r\n }\r\n}\r\n\r\nexport class DataViewColumns extends React.Component {\r\n render(){\r\n return Data view
\r\n }\r\n}\r\n\r\n\r\n\r\nexport class DataViewSorting extends React.Component {\r\n render(){\r\n return Data view
\r\n }\r\n}\r\n\r\nexport class DataViewSort extends React.Component {\r\n render(){\r\n return Data view
\r\n }\r\n}\r\n\r\nexport class DataViewGrouping extends React.Component {\r\n render(){\r\n return Data view
\r\n }\r\n}","import { Application, Canvas, PageContainer } from 'core';\r\nimport React from 'react';\r\nimport { ScreenRef } from './ActionEvent';\r\nimport {Broadcast} from './Broadcast';\r\nimport { Dialog } from './Dialog';\r\nimport { Response } from './Response';\r\nimport { IPageLaunchParams } from './types';\r\n\r\n\r\nexport interface IBotMessage {\r\n id:string;\r\n type:'screen' | 'card';\r\n question?:string;\r\n text?:string;\r\n botName:string;\r\n screen?:string;\r\n params?:any;\r\n loaded?:boolean;\r\n timestamp?:string;\r\n answered?:boolean;\r\n content?:any;\r\n refresh?:() => void;\r\n}\r\n\r\nexport interface IBotOption {\r\n id:string;\r\n label:string;\r\n screen?:string;\r\n params?:any;\r\n command?:string;\r\n}\r\n\r\nexport interface IBotMenuCommand {\r\n name:string;\r\n label:string;\r\n description:string;\r\n hint?:string;\r\n screen:string;\r\n eventParam?:string;\r\n}\r\n\r\nexport interface IBotInfo {\r\n botState:BotState;\r\n message:IBotMessage;\r\n command?:string;\r\n onLoaded?:() => void;\r\n dataRequestId?:string;\r\n}\r\n\r\nclass BotPubSub {\r\n webSocket:WebSocket;\r\n listeners:BotState[] = [];\r\n \r\n\r\n async connect(listener:BotState){\r\n if (!this.webSocket){\r\n await this.connectToPubSub();\r\n }\r\n let index = this.findListener(listener);\r\n if (index == -1){\r\n this.listeners.push(listener);\r\n }\r\n }\r\n\r\n disconnect(listener:BotState){\r\n let index = this.findListener(listener);\r\n if (index != -1) {\r\n this.listeners.splice(index, 1);\r\n }\r\n if (this.listeners.length == 0){\r\n this.webSocket.close();\r\n this.webSocket = null;\r\n }\r\n }\r\n\r\n private findListener(listener:BotState):number{\r\n for(let i = 0; i < this.listeners.length;i++){\r\n let item = this.listeners[i];\r\n if (item == listener) return i;\r\n }\r\n return -1;\r\n }\r\n \r\n private async connectToPubSub(){\r\n let botConnectUrl = Application.instance.session.botConnect;\r\n let res = await fetch(botConnectUrl);\r\n let url = await res.text();\r\n let ws = new WebSocket(url);\r\n ws.onopen = () => console.log('connected');\r\n ws.onclose = () => console.log('ws closed');\r\n\r\n ws.onmessage = event => {\r\n \r\n let data = event.data;\r\n for(let i = 0; i < this.listeners.length;i++){\r\n let listener = this.listeners[i];\r\n listener.onWebSocketMessage(data);\r\n }\r\n \r\n }\r\n this.webSocket = ws;\r\n }\r\n\r\n \r\n\r\n}\r\nexport class BotState {\r\n canvas:Canvas;\r\n\r\n private static botPubSub:BotPubSub;\r\n\r\n broadcast = new Broadcast();\r\n promptBroadcast = new Broadcast();\r\n messages:IBotMessage[] = [];\r\n\r\n promptRef = React.createRef();\r\n scrollRef = React.createRef();\r\n promptValue:string = \"\";\r\n inputHelp:string;\r\n nextId = 1;\r\n\r\n commandMenuOpen:boolean;\r\n commandMenuActiveIndex:number;\r\n commandMenuItems:IBotMenuCommand[];\r\n commands:IBotMenuCommand[] = [\r\n {name:\"sales\",label:\"sales\",description:\"display today's sales\",hint:null,screen:\"sales\"},\r\n {name:\"tag\",label:\"tag\",description:\"get tag information\",hint:\"number\",screen:\"tag\"},\r\n {name:\"truck\",label:\"truck\",description:\"get truck information\",hint:\"number\",screen:\"truck\"},\r\n {name:\"user\",label:\"user\",description:\"get user information\",hint:\"first or last name\",screen:\"user\"}\r\n ]\r\n\r\n constructor(){\r\n var app = Application.instance;\r\n let greeting;\r\n if (app.session.firstName){\r\n greeting = \"Hello \" + app.session.firstName + \"!\";\r\n }\r\n else {\r\n greeting = \"Hello!\";\r\n }\r\n this.messages.push({type:\"card\",botName:\"Lisabot\",content:greeting,loaded:true,id:(this.nextId++).toString()});\r\n }\r\n\r\n async connect(){\r\n if (BotState.botPubSub == null){\r\n BotState.botPubSub = new BotPubSub();\r\n }\r\n BotState.botPubSub.connect(this);\r\n }\r\n\r\n disconnect(){\r\n if (BotState.botPubSub){\r\n BotState.botPubSub.disconnect(this);\r\n }\r\n }\r\n\r\n getParamsForQuestion(question:string){\r\n if (!question) return {};\r\n let i = question.indexOf(' ');\r\n let commandText:string;\r\n let value:string;\r\n if (i == -1){\r\n commandText = question;\r\n }\r\n else {\r\n commandText = question.substring(0,i);\r\n value = question.substring(i + 1);\r\n }\r\n let command = this.findCommand(commandText);\r\n if (!command) return null;\r\n \r\n let params:any = {screen:command.screen};\r\n if (value){\r\n let values = this.parseParameterValues(command,value);\r\n Object.assign(params,values);\r\n }\r\n return params;\r\n }\r\n \r\n parseParameterValues(command:IBotMenuCommand, s:string):any {\r\n let values:any = {};\r\n let i = s.indexOf(\":\");\r\n let eventParamName = command.eventParam || \"@event-value\";\r\n if (i == -1){\r\n values[eventParamName] = s;\r\n return values;\r\n }\r\n let segments = s.split(\":\");\r\n let paramName:string;\r\n for(let i =0 ; i < segments.length;i++){\r\n let seg = segments[i].trim();\r\n let sp = seg.lastIndexOf(' ');\r\n let value:string;\r\n let nextParam:string;\r\n if (sp == -1){\r\n if (i == segments.length - 1){\r\n value = seg;\r\n }\r\n else {\r\n nextParam = seg;\r\n }\r\n }\r\n else {\r\n value = seg.substring(0,sp);\r\n nextParam = seg.substring(sp + 1);\r\n }\r\n \r\n if (paramName){\r\n values[\"@\" + paramName] = value;\r\n }\r\n else if (value){\r\n values[eventParamName] = value;\r\n }\r\n paramName = nextParam;\r\n }\r\n\r\n return values; \r\n }\r\n\r\n \r\n\r\n findCommand(command:string):IBotMenuCommand {\r\n if (!command) return null;\r\n command = command.toLowerCase();\r\n for(let i =0 ; i < this.commands.length;i++){\r\n let c = this.commands[i];\r\n if (c.name == command){\r\n return c;\r\n }\r\n }\r\n return null;\r\n }\r\n onWebSocketMessage(data:string){\r\n if (data[0] == \"{\"){\r\n let message = JSON.parse(data);\r\n let messageId = message.header.message_id;\r\n this.dataArrived(messageId,message.body);\r\n return;\r\n }\r\n this.addQuestion(data,data);\r\n //this.botState.addMessage({loaded:true,type:\"card\",content:event.data,botName:\"lisabot\"});\r\n }\r\n\r\n send(){\r\n let text = this.promptValue;\r\n if (text){\r\n this.addQuestion(text,text);\r\n this.setPromptValue(\"\");\r\n }\r\n }\r\n\r\n addMessage(item:IBotMessage){\r\n this.messages.push(item);\r\n this.broadcast.refresh();\r\n }\r\n\r\n addQuestion(value:string,text:string){\r\n \r\n this.messages.push({type:\"screen\",question:value,text,botName:\"LisaBot\",id:(this.nextId++).toString()});\r\n\r\n this.promptBroadcast.refresh();\r\n if (this.promptRef.current){\r\n this.promptRef.current.focus();\r\n }\r\n this.broadcast.refresh();\r\n }\r\n\r\n setPromptValue(value:string){\r\n this.promptValue = value;\r\n let help;\r\n if (value){\r\n let space = value.indexOf(' ');\r\n if (space == -1){\r\n this.buildCommmandMenu();\r\n this.commandMenuOpen = true;\r\n }\r\n else {\r\n this.commandMenuOpen = false;\r\n let commandText = value.substr(0,space);\r\n if (space == value.length - 1){\r\n let command = this.getCommand(commandText);\r\n if (command){\r\n help = value + command.hint;\r\n }\r\n }\r\n }\r\n }\r\n else {\r\n this.commandMenuOpen = false;\r\n }\r\n this.inputHelp = help;\r\n this.promptBroadcast.refresh();\r\n }\r\n\r\n findMessage(message:IBotMessage):number {\r\n for(let i = 0; i < this.messages.length;i++){\r\n if (message == this.messages[i]) return i;\r\n }\r\n return -1;\r\n }\r\n\r\n getCommand(commandText:string):IBotMenuCommand{\r\n for(let i = 0; i < this.commands.length;i++){\r\n let command = this.commands[i];\r\n if (command.name == commandText){\r\n return command;\r\n }\r\n }\r\n }\r\n cancel(){\r\n\r\n if (this.promptRef.current){\r\n this.promptRef.current.focus();\r\n }\r\n this.messages.pop();\r\n this.broadcast.refresh();\r\n \r\n }\r\n\r\n scrollToEnd(){\r\n if (this.scrollRef.current){\r\n this.scrollRef.current.scrollTop = 99999;\r\n }\r\n }\r\n\r\n buildCommmandMenu(){\r\n this.commandMenuItems = [];\r\n \r\n let value = this.promptValue;\r\n let n:number;\r\n if (value){\r\n n = value.length;\r\n }\r\n for(let i = 0; i < this.commands.length;i++){\r\n let command = this.commands[i];\r\n if (value){\r\n if (command.label.substr(0,n) == value){\r\n this.commandMenuItems.push(command);\r\n }\r\n } \r\n else {\r\n this.commandMenuItems.push(command);\r\n }\r\n }\r\n this.commandMenuActiveIndex = 0;\r\n }\r\n\r\n chooseActiveCommand(){\r\n if (this.commandMenuItems && this.commandMenuActiveIndex < this.commandMenuItems.length){\r\n let command = this.commandMenuItems[this.commandMenuActiveIndex];\r\n this.setPromptValue(command.name + \" \");\r\n if (!command.hint){\r\n this.send();\r\n }\r\n }\r\n }\r\n\r\n menuUp(){\r\n if (this.commandMenuOpen){\r\n if (this.commandMenuActiveIndex > 0){\r\n this.commandMenuActiveIndex--;\r\n this.promptBroadcast.refresh();\r\n }\r\n }\r\n else {\r\n this.buildCommmandMenu();\r\n this.commandMenuOpen = true;\r\n this.promptBroadcast.refresh();\r\n }\r\n }\r\n menuDown(){\r\n if (this.commandMenuOpen){\r\n if (this.commandMenuItems && (this.commandMenuActiveIndex + 1) < this.commandMenuItems.length){\r\n this.commandMenuActiveIndex++;\r\n this.promptBroadcast.refresh();\r\n }\r\n }\r\n else {\r\n this.buildCommmandMenu();\r\n this.commandMenuOpen = true;\r\n this.promptBroadcast.refresh();\r\n }\r\n }\r\n executeOption(message:IBotMessage,option:IBotOption){\r\n \r\n if (option.id == \"cancel\"){\r\n this.cancel();\r\n }\r\n else {\r\n if (option.screen){\r\n \r\n let page:IPageLaunchParams = {\r\n name:option.screen,\r\n layout:\"default\",\r\n props:option.params\r\n }\r\n let dialog = \r\n Dialog.open(this.canvas,dialog,null,\"dialog\");\r\n }\r\n else {\r\n let value = option.id;\r\n let text = option.id;\r\n let command = option.command;\r\n if (command){\r\n value = command + \" \" + option.id;\r\n text = command + \" \" + option.label;\r\n }\r\n text = message.text;\r\n let index = this.findMessage(message);\r\n if (index != -1){\r\n this.messages.splice(index,1); // remove the dialog from the message list\r\n }\r\n this.addQuestion(value,text);\r\n }\r\n }\r\n }\r\n\r\n public waitingForData(canvas:Canvas){\r\n \r\n } \r\n\r\n public async dataArrived(id:string,data:any){\r\n \r\n let canvas = this.findCanvas(id);\r\n if (!canvas) return;\r\n let screenRef = new ScreenRef(canvas,{});\r\n await Response.process(screenRef,\"batch\",data);\r\n canvas.loaded();\r\n canvas.botInfo.onLoaded();\r\n }\r\n\r\n private findCanvas(id:string):Canvas {\r\n let screens = Application.instance.activeScreens;\r\n for(let i = 0; i < screens.length;i++){\r\n let screen = screens[i];\r\n let canvas = screen.canvas;\r\n if (canvas.botInfo && canvas.botInfo.dataRequestId == id){\r\n return canvas;\r\n }\r\n }\r\n return null;\r\n }\r\n}","\r\nimport React from 'react';\r\nimport {ActionRef, makeComponent, PageContainer, RenderEvent} from '../core';\r\nimport { Icon } from './Icon';\r\nimport {BotState, IBotMenuCommand, IBotMessage, IBotOption,IBotInfo} from 'core/BotState';\r\nimport { IPageLaunchParams } from 'core/types';\r\n\r\n\r\n export const Bot = makeComponent(class extends React.Component<{event:RenderEvent}>{\r\n\r\n\r\n containerRef = React.createRef();\r\n\r\n botState:BotState;\r\n\r\n constructor(props){\r\n super(props);\r\n let canvas = this.props.event.canvas;\r\n this.botState = new BotState();\r\n this.botState.canvas = canvas;\r\n this.botState.commands = this.getCommands(); // canvas.getRecord(\"@commands\",{});\r\n }\r\n\r\n componentDidMount(){\r\n this.containerRef.current.addEventListener(\"wheel\",this.handleWheel);\r\n this.botState.broadcast.connect(this);\r\n this.props.event.canvas.blockState[\"$bot\"] = this.botState;\r\n if (this.botState.promptRef.current){\r\n this.botState.promptRef.current.focus();\r\n }\r\n this.botState.connect();\r\n }\r\n\r\n componentWillUnmount(){\r\n this.containerRef.current.removeEventListener(\"wheel\",this.handleWheel);\r\n this.botState.broadcast.disconnect(this);\r\n this.botState.disconnect();\r\n }\r\n\r\n componentDidUpdate(){\r\n this.botState.scrollToEnd();\r\n }\r\n\r\n getCommands():IBotMenuCommand[]{\r\n let commands:IBotMenuCommand[] = [];\r\n React.Children.forEach(this.props.children,(child:any) => {\r\n let props = child.props;\r\n if (props && props.$kind == \"UI.Bot.Command\"){\r\n let command:IBotMenuCommand = {\r\n name:props.name,\r\n label:props.name,\r\n hint:props.hint,\r\n description:props.description,\r\n screen:props.screen,\r\n eventParam:props.eventParam\r\n };\r\n commands.push(command);\r\n }\r\n })\r\n return commands;\r\n }\r\n\r\n render() {\r\n let event = this.props.event;\r\n let screenElems = [];\r\n let messages = this.botState.messages;\r\n for(let i = 0; i < messages.length;i++){\r\n let message = messages[i];\r\n let elem;\r\n elem = ( \r\n \r\n
);\r\n screenElems.push(elem);\r\n }\r\n let maxWidth = 800;\r\n return (\r\n
\r\n
\r\n {screenElems}\r\n
\r\n
\r\n
\r\n \r\n
\r\n \r\n
{botInfo.message.botName}{botInfo.message.timestamp}
\r\n let content;\r\n if (this.props.children){\r\n content = {this.props.children}
\r\n }\r\n return (\r\n
\r\n {timestamp}\r\n
{this.props.message}
\r\n
\r\n {options}\r\n {content}\r\n
\r\n }\r\n\r\n let timestamp = {message.botName}{message.timestamp}
\r\n if (message.type == \"screen\"){\r\n let botInfo:IBotInfo = {botState:this.props.botState,message:message,onLoaded:this.handleLoaded};\r\n \r\n let questionParams = this.props.botState.getParamsForQuestion(message.question);\r\n if (questionParams){\r\n let page:IPageLaunchParams = {\r\n name:\"\",\r\n layout:\"bot\",\r\n props:questionParams\r\n }\r\n content = (<>\r\n {timestamp}\r\n \r\n )\r\n }\r\n else {\r\n typing = null;\r\n content = (<>\r\n {timestamp}\r\n ???
\r\n )\r\n }\r\n }\r\n else if (message.content){\r\n let style:React.CSSProperties = {backgroundColor:\"#fff\",padding:\"10px 20px\",borderRadius:6};\r\n \r\n content = (<>\r\n {timestamp}\r\n \r\n \r\n
{message.content}
\r\n
\r\n
\r\n
{message.timestamp}
\r\n
{message.text}
\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n {typing}\r\n
\r\n
\r\n {content}\r\n
\r\n
\r\n {footer}\r\n
\r\n
\r\n
\r\n
\r\n {botState.inputHelp}\r\n
\r\n {commandList}\r\n
\r\n
{command.label}
\r\n
{command.description}
\r\n
\r\n {elems}\r\n
)\r\n }\r\n}\r\n\r\nclass BotOptions extends React.Component<{botState:BotState,options:IBotOption[],handleChooseOption:(option:IBotOption) => void}>{\r\n render(){\r\n let buttons = [];\r\n let options = this.props.options;\r\n if (!options) return null;\r\n for (let i =0 ; i < options.length; i++){\r\n let option = options[i];\r\n buttons.push()\r\n }\r\n return (\r\n {buttons}\r\n
)\r\n }\r\n\r\n handleClick= (option:any) => {\r\n this.props.handleChooseOption(option);\r\n \r\n }\r\n}\r\n\r\nexport class BotOption extends React.Component<{event:RenderEvent,onClick:ActionRef,label:string}>{\r\n\r\n render(): React.ReactNode {\r\n let label = this.props.label;\r\n return \r\n }\r\n\r\n handleClick = (e:React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n if (this.props.onClick){\r\n this.props.onClick.trigger();\r\n }\r\n let event = this.props.event;\r\n if (event.canvas.botInfo){\r\n let botState = event.canvas.botInfo.botState;\r\n if (botState.promptRef.current){\r\n botState.promptRef.current.focus();\r\n }\r\n }\r\n }\r\n}\r\n\r\nclass BotDialogButton extends React.Component<{option:any,onClick:(option:any) => void}>{\r\n render(){\r\n let name = this.props.option.name;\r\n let label = this.props.option.label;\r\n if (name == \"cancel\"){\r\n return \r\n }\r\n\r\n let segments = label.split('|');\r\n let labelElem;\r\n if (segments.length > 1){\r\n let labelElems = [];\r\n for(let i =0; i < segments.length;i++){\r\n labelElems.push({segments[i]}
)\r\n }\r\n labelElem = {labelElems}
\r\n }\r\n else {\r\n labelElem = label;\r\n }\r\n \r\n return \r\n }\r\n\r\n handleClick = (e:React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n this.props.onClick(this.props.option);\r\n }\r\n}\r\n\r\nexport class Typing extends React.Component<{}>{\r\n render(){\r\n return ()\r\n }\r\n}","export function Wrapper(props:{children:any}){\r\n return \r\n {props.children}\r\n
\r\n}","import React from 'react';\r\nimport {PieChart,Pie} from 'recharts';\r\nimport {ActionRef, CollectionRef, ComponentStyles, FieldFormatter, makeComponent, RenderEvent} from 'core';\r\nimport {Wrapper} from './Wrapper';\r\nimport { Icon } from 'components/Icon';\r\n\r\nexport const ValueLimitChart = makeComponent(class extends React.Component<{event:RenderEvent, \r\n title: string;\r\n value:any;\r\n limit:number;\r\n label:string,styles:string,format:string,\r\n onClick:ActionRef,\r\n warningValue:number,\r\n dangerValue:number,\r\n smallerIsBetter:boolean\r\n}>{\r\n\r\n render(): React.ReactNode {\r\n \r\n let icon;\r\n let styles = this.props.event.computeStyles(this.props.styles);\r\n if (styles.icon){\r\n icon = \r\n }\r\n let content;\r\n \r\n \r\n let progress;\r\n if (this.props.limit){\r\n let percentage = (this.props.value * 100)/this.props.limit;\r\n let width = percentage + \"%\";\r\n let progressColor = \"#65a1f0\";\r\n if (this.props.smallerIsBetter){\r\n if (this.props.dangerValue && percentage >= this.props.dangerValue){\r\n progressColor = \"var(--rt-text-color-danger)\";\r\n }\r\n else if (this.props.warningValue && percentage >= this.props.warningValue){\r\n progressColor = \"var(--rt-text-color-warning)\";\r\n }\r\n else {\r\n progressColor = \"var(--rt-text-color-success)\";\r\n }\r\n }\r\n else if (this.props.dangerValue || this.props.warningValue){\r\n if (this.props.dangerValue && percentage <= this.props.dangerValue){\r\n progressColor = \"var(--rt-text-color-danger)\";\r\n }\r\n else if (this.props.warningValue && percentage <= this.props.warningValue){\r\n progressColor = \"var(--rt-text-color-warning)\";\r\n }\r\n else {\r\n progressColor = \"var(--rt-text-color-success)\";\r\n }\r\n }\r\n progress = \r\n
\r\n
\r\n content = FieldFormatter.formatNumber(percentage,\"##0\") + \"%\";\r\n }\r\n else {\r\n progress =
\r\n let format = this.props.format || styles.format;\r\n if (format){\r\n content = FieldFormatter.format(this.props.value,null,format);\r\n }\r\n else {\r\n content = this.props.value;\r\n }\r\n }\r\n if (!content && content !== 0){\r\n content = '\\u00A0';\r\n }\r\n let containerStyle:React.CSSProperties = {};\r\n if (this.props.onClick){\r\n containerStyle.cursor = \"pointer\";\r\n }\r\n return
\r\n
\r\n
\r\n {progress}\r\n
\r\n {icon}\r\n {content}\r\n
\r\n
\r\n
\r\n }\r\n\r\n handleClick = (e:React.MouseEvent) => {\r\n e.stopPropagation();\r\n if (this.props.onClick){\r\n this.props.onClick.trigger();\r\n }\r\n }\r\n renderDonutContent(){\r\n let widgetLabel = this.props.label;\r\n let percent: number = 0.71;\r\n let startAngle = 90;\r\n let endAngle: number;\r\n endAngle = startAngle - (percent * 360);\r\n let valueText = Math.round(percent * 100) + \"%\";\r\n let data = [{ name: widgetLabel, value: 1 }];\r\n return(
)\r\n }\r\n renderDonut() {\r\n \r\n let collection = this.props.value;\r\n let row;\r\n if (collection && collection.rows){\r\n row = collection.rows[0];\r\n } \r\n let value;\r\n let limit;\r\n if (row){\r\n value = row[\"value\"];\r\n limit = row[\"limit\"];\r\n }\r\n let widgetLabel = this.props.label;\r\n let percent: number;\r\n let startAngle = 90;\r\n let endAngle: number;\r\n let valueText: string;\r\n\r\n if (limit) {\r\n percent = value / limit;\r\n if (percent > 1) {\r\n percent = 1;\r\n }\r\n if (percent < 0) {\r\n percent = 0;\r\n }\r\n }\r\n\r\n let content;\r\n\r\n if (isNaN(percent)){\r\n content = null;\r\n }\r\n else {\r\n endAngle = startAngle - (percent * 360);\r\n valueText = Math.round(percent * 100) + \"%\";\r\n let data = [{ name: widgetLabel, value: 1 }];\r\n content = (<>\r\n
\r\n \r\n \r\n
{valueText}
\r\n );\r\n }\r\n \r\n //, width: 300\r\n return (
\r\n \r\n
{widgetLabel}
\r\n
{this.props.title}
\r\n
\r\n {content}\r\n
\r\n
)\r\n }\r\n});\r\n\r\n\r\nexport const ValueChart = makeComponent(class extends React.Component<{event:RenderEvent, \r\n title: string;\r\n value:CollectionRef;\r\n limit:number;\r\n label:string}>{\r\n\r\n render() {\r\n \r\n \r\n let value;\r\n let collection = this.props.value;\r\n if (collection && collection.rows){\r\n let row = collection.rows[0];\r\n value = row[\"value\"];\r\n }\r\n let widgetLabel = this.props.label;\r\n\r\n return (
\r\n \r\n
{widgetLabel}
\r\n
{this.props.title}
\r\n
\r\n
)\r\n }\r\n});\r\n","import { ActionRef, CollectionRef, FieldType, makeComponent, RenderEvent } from 'core';\r\nimport { NumberFormatter } from 'core/FieldFormatter';\r\nimport React from 'react';\r\nimport {Area, AreaChart, Bar, BarChart, CartesianGrid, Cell, Legend, Line, LineChart, Pie, PieChart, Tooltip, XAxis, YAxis} from 'recharts';\r\n\r\n\r\nexport const SeriesChart = makeComponent(class extends React.Component<{ event:RenderEvent,\r\n chartType:'bar' | 'line' | 'pie' | 'area',\r\n label?:string,\r\n collection?:CollectionRef,\r\n settings?:SeriesChartSettings,\r\n onRowClick?:ActionRef}>{\r\n\r\n containerRef = React.createRef
();\r\n\r\n componentDidMount(){\r\n this.forceUpdate();\r\n }\r\n\r\n render() {\r\n let chartType = this.props.chartType;\r\n \r\n let content;\r\n let settings:SeriesChartSettings = this.props.settings;\r\n let collection = this.props.collection;\r\n if (!settings || !this.containerRef.current){\r\n content = this.renderEmptyState();\r\n }\r\n else {\r\n if (chartType == \"pie\"){\r\n content = this.renderPieChart(collection,settings);\r\n }\r\n else if (chartType == \"line\"){\r\n content = this.renderLineChart(collection,settings);\r\n }\r\n else if (chartType == \"area\"){\r\n content = this.renderAreaChart(collection,settings);\r\n }\r\n else {\r\n content = this.renderBarChart(collection,settings)\r\n }\r\n }\r\n return (\r\n \r\n
{this.props.label}
\r\n
\r\n {content}\r\n
\r\n
\r\n
No results found
\r\n
{this.props.children}
\r\n }\r\n return (\r\n
\r\n \r\n
\r\n
\r\n
{label}
\r\n {content}\r\n
\r\n
\r\n
{label}
\r\n {this.props.children}\r\n
\r\n \r\n
\r\n );\r\n }\r\n else {\r\n icon = \r\n }\r\n\r\n let label = this.props.label || field.label;\r\n \r\n let children;\r\n let containerStyle:React.CSSProperties = {display:\"flex\",gap:5};\r\n\r\n if (this.props.children){\r\n children =
{this.props.children}
\r\n }\r\n else {\r\n containerStyle.alignItems = \"center\";\r\n }\r\n return (\r\n
\r\n
\r\n {icon}\r\n
\r\n
\r\n
{label}
\r\n {children}\r\n
\r\n
\r\n\r\n )\r\n }\r\n }\r\n\r\n export class Annotation extends React.Component<{event:RenderEvent,label:string,icon:string}>{\r\n render(): React.ReactNode {\r\n \r\n let icon;\r\n if (this.props.icon){\r\n icon = (\r\n
\r\n \r\n
\r\n );\r\n }\r\n\r\n \r\n return (\r\n
\r\n {icon}\r\n
\r\n
{this.props.label}
\r\n
{this.props.children}
\r\n
\r\n
\r\n\r\n )\r\n }\r\n}\r\n\r\nexport class List extends React.Component<{event:RenderEvent,className:string}>{\r\n render(): React.ReactNode {\r\n let items = [];\r\n let itemClass = \"list-item\";\r\n if (this.props.className){\r\n itemClass += \" \" + this.props.className;\r\n }\r\n React.Children.forEach(this.props.children,(child:any,index:number) => {\r\n if (React.isValidElement(child)){\r\n items.push(
{child}
)\r\n }\r\n });\r\n return
\r\n {items}\r\n
\r\n }\r\n}","import { ActionRef, FieldRef } from 'core';\r\nimport React from 'react';\r\n\r\nexport class NavBarValueSelector extends React.Component<{value:any,action:ActionRef}>{\r\n render(){\r\n let value;\r\n let link;\r\n if (this.props.value){\r\n value =
{this.props.value}
\r\n }\r\n if (this.props.action){\r\n link =
{this.props.action.label}\r\n }\r\n return (
\r\n {value}\r\n {link}\r\n
)\r\n }\r\n\r\n handleClick = (e:React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n if (this.props.action){\r\n this.props.action.trigger({});\r\n }\r\n }\r\n \r\n}","import { Select } from 'components/display/Select';\r\nimport { TextBox } from 'components/display/TextBox';\r\nimport { AnchorPoint } from 'components/helpers/AnchorPoint';\r\nimport { ComponentStyles, FieldRef, RecordMeta, RenderEvent } from 'core';\r\nimport React from 'react';\r\nimport { Popup } from './Popup';\r\nimport { TextFilter } from 'components/FilterField';\r\n\r\n\r\nexport class DateRangePicker extends React.Component<{event:RenderEvent,from:FieldRef,to:FieldRef,ranges:any}>{\r\n dropRef:React.RefObject
= React.createRef();\r\n \r\n state= {open:false}\r\n\r\n render(){\r\n let displayValue;\r\n \r\n let event = this.props.event;\r\n\r\n let popup;\r\n if (this.state.open){\r\n popup = this.renderPopup();\r\n }\r\n \r\n let dates;\r\n let from = this.props.from;\r\n let to = this.props.to;\r\n\r\n dates =(<>\r\n \r\n
\r\n
\r\n \r\n
\r\n
\r\n {dates}\r\n
\r\n }\r\n\r\n \r\n renderPopup(){\r\n return ();\r\n }\r\n\r\n renderMenu = ()=>{\r\n let elems = [];\r\n let current:string = null;\r\n let ranges = this.props.ranges;\r\n if (ranges){\r\n for(let i = 0 ; i < ranges.length;i++){\r\n let range = ranges[i];\r\n elems.push()\r\n }\r\n }\r\n\r\n let content = \r\n {elems}\r\n
\r\n return content;\r\n\r\n\r\n }\r\n handleOptionClick = (name:string) => {\r\n \r\n \r\n let canvas = this.props.event.canvas;\r\n let range = this.findRange(name);\r\n if (range){\r\n this.props.from.setValueNoUpdate(range.from);\r\n this.props.to.setValue(range.to);\r\n }\r\n this.setState({open:false});\r\n }\r\n\r\n findRange(name:string){\r\n let ranges = this.props.ranges;\r\n for(let i = 0; i < ranges.length;i++){\r\n let range = ranges[i];\r\n if (range.label == name){\r\n return range;\r\n }\r\n }\r\n return null;\r\n }\r\n\r\n handleRangeSelectorClick = (e:React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n this.setState({open:true});\r\n }\r\n\r\n handlePopupForceClose = () => {\r\n this.setState({open:false});\r\n }\r\n}\r\n\r\nclass DateRangePickerOld extends React.Component<{event:RenderEvent,record:any}>{\r\n dropRef:React.RefObject = React.createRef();\r\n \r\n state= {open:false}\r\n\r\n render(){\r\n let displayValue;\r\n \r\n let event = this.props.event;\r\n\r\n let fields = this.getFields();\r\n\r\n let rangeValue = fields.range.value;\r\n\r\n if (rangeValue){\r\n displayValue = this.getLabel(rangeValue);\r\n }\r\n else {\r\n displayValue = \"Select date range\";\r\n }\r\n\r\n let popup;\r\n if (this.state.open){\r\n popup = this.renderPopup();\r\n }\r\n \r\n let rangeSelector =( \r\n
\r\n
\r\n
{displayValue}
\r\n
\r\n {this.renderAngleDown()}\r\n
\r\n
\r\n {popup}\r\n
\r\n {rangeSelector}\r\n {dates}\r\n \r\n
\r\n }\r\n\r\n getFields():{range:FieldRef,bucket:FieldRef,from:FieldRef,to:FieldRef}{\r\n let record = this.props.record;\r\n let meta = RecordMeta.forRecord(record);\r\n let canvas = this.props.event.canvas;\r\n let event = this.props.event;\r\n let recordName = meta.schema.name;\r\n return {\r\n \r\n range:event.field(recordName + \".range\"),\r\n bucket:event.field(recordName + \".bucket\"),\r\n from:event.field(recordName + \".from\"),\r\n to:event.field(recordName + \".to\")\r\n }\r\n }\r\n\r\n getValue():string {\r\n let record = this.props.record;\r\n return record[\"range\"];\r\n }\r\n\r\n getLabel(value:string):string {\r\n switch(value){\r\n case \"this-year\":return \"This year\";\r\n case \"last-year\":return \"Last year\";\r\n case \"next-year\":return \"Next year\";\r\n case \"this-month\":return \"This month\";\r\n case \"last-month\":return \"Last month\";\r\n case \"next-month\":return \"Next month\";\r\n case \"this-week\":return \"This week\";\r\n case \"last-week\":return \"Last week\";\r\n case \"next-week\":return \"Next week\";\r\n case \"today\":return \"Today\";\r\n case \"yesterday\":return \"Yesterday\";\r\n case \"tomorrow\":return \"Tomorrow\";\r\n case \"from-to\":return \"Custom\";\r\n }\r\n return value;\r\n }\r\n renderPopup(){\r\n return ();\r\n }\r\n\r\n renderMenu = ()=>{\r\n let elems = [];\r\n let fields = this.getFields();\r\n let current = fields.range.value;\r\n elems.push(\r\n \r\n \r\n \r\n
);\r\n\r\n elems.push(\r\n \r\n \r\n \r\n
);\r\n\r\n elems.push(\r\n \r\n \r\n \r\n
);\r\n\r\n elems.push(\r\n \r\n \r\n \r\n
);\r\n elems.push();\r\n elems.push(
)\r\n \r\n \r\n \r\n let content =
\r\n {elems}\r\n
\r\n return content;\r\n\r\n\r\n }\r\n handleOptionClick = (name:string) => {\r\n this.setState({open:false});\r\n let record = this.props.record;\r\n let meta = RecordMeta.forRecord(record);\r\n let canvas = this.props.event.canvas;\r\n\r\n let bucket:string;\r\n\r\n if (name == \"this-year\" || name==\"last-year\" || name == \"next-year\"){\r\n bucket = \"month\";\r\n }\r\n else if (name == \"this-month\" || name == \"last-month\" || name == \"next-month\"){\r\n bucket = \"week\";\r\n }\r\n else {\r\n bucket = \"day\";\r\n }\r\n\r\n let bucketField = canvas.getFieldRef(meta.schema.name + \".bucket\",this.props.event.scope);\r\n bucketField.setValueNoUpdate(bucket);\r\n\r\n let rangeField = canvas.getFieldRef(meta.schema.name + \".range\",this.props.event.scope);\r\n rangeField.setValue(name);\r\n }\r\n\r\n handleClick = (e:React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n this.setState({open:true});\r\n }\r\n\r\n handlePopupForceClose = () => {\r\n this.setState({open:false});\r\n }\r\n\r\n renderAngleDown(){\r\n return (
);\r\n }\r\n}\r\n\r\nclass Option extends React.Component<{label:string,name:string,current:string;onClick:(name:string) => void}>{\r\n render(){\r\n let fontWeight = 400;\r\n if (this.props.current == this.props.name){\r\n fontWeight = 500;\r\n }\r\n return (
{this.props.label}
)\r\n }\r\n handleClick = (e:React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n this.props.onClick(this.props.name);\r\n }\r\n}","import { ICollectionGroup, ICollectionSortField } from \"./Collection\";\r\nimport { IRecordSchema } from \"./Schema\";\r\nimport { FieldType } from \"./types\";\r\n\r\n\r\nexport type IGroupTotalSet = {[name:string]:ITotalAccumulator};\r\n\r\n\r\nexport interface IReportTotal {\r\n name:string;\r\n label:string;\r\n fieldType?:FieldType;\r\n createTotal?:() => ITotalAccumulator;\r\n}\r\n\r\nexport interface IQueryGroupHeader {\r\n label:string;\r\n text:string;\r\n value:string;\r\n totals?:IGroupTotalSet;\r\n group:ICollectionGroup;\r\n innermost?:boolean;\r\n row:any;\r\n}\r\n\r\nexport interface IQueryGroupFooter {\r\n row?:any;\r\n totals?:any;\r\n group:ICollectionGroup;\r\n innermost?:boolean;\r\n}\r\n\r\nexport interface IQueryGroupItem {\r\n type:'row' | 'header' | 'footer' | 'last-row'\r\n level?:number;\r\n row?:any;\r\n rowIndex?:number;\r\n header?:IQueryGroupHeader;\r\n footer?:IQueryGroupFooter;\r\n continued?:boolean;\r\n}\r\n\r\n\r\nexport interface IPageIndex {\r\n start:number;\r\n end:number;\r\n}\r\n\r\nexport interface IQueryGroupMap {\r\n items:IQueryGroupItem[];\r\n pages:IPageIndex[];\r\n summaryGroup:IQueryGroupItem;\r\n}\r\n\r\nexport class CollectionGrouper {\r\n\r\n public schema:IRecordSchema;\r\n public groups:ICollectionGroup[];\r\n public reportGroup:ICollectionGroup;\r\n public definedTotals:IReportTotal[];\r\n public pageSize:number;\r\n\r\n private _currentHeaders:IQueryGroupHeader[];\r\n public items:IQueryGroupItem[];\r\n private _currentTotals:IGroupTotalSet;\r\n private _currentRowCount:number;\r\n private _lineIndex:number;\r\n private _pageRowCount:number;\r\n\r\n private _lastGroup:number;\r\n public reportTotals:IGroupTotalSet;\r\n private _pages:IPageIndex[]\r\n\r\n constructor(){\r\n this._currentHeaders = [];\r\n this.groups = [];\r\n this.definedTotals = [];\r\n this.pageSize = 20;\r\n }\r\n\r\n public groupRows(rows:any[]):IQueryGroupMap{\r\n if (!this.groups.length) return this.noGroups(rows);\r\n this.items = [];\r\n this._pages = [{start:0,end:0}];\r\n this._pageRowCount = 0;\r\n this._lineIndex = 0;\r\n this._lastGroup = this.groups.length - 1;\r\n this._currentTotals = this.createTotals();\r\n this.reportTotals = this.createTotals();\r\n if (!rows.length) return {items:this.items,pages:this._pages,summaryGroup: null};\r\n\r\n let firstRow = rows[0];\r\n \r\n this.createHeaders(firstRow,0);\r\n this.items.push({type:\"row\",row:firstRow,rowIndex:0});\r\n this._lineIndex++;\r\n this._pageRowCount++;\r\n\r\n this._currentRowCount = 1;\r\n this.addRowTotals(firstRow);\r\n let lastRow = firstRow;\r\n let row;\r\n for (let i = 1; i < rows.length;i++){\r\n row = rows[i];\r\n \r\n let level = this.getBreakLevel(row);\r\n if (level != -1){\r\n this.createFooters(lastRow,level);\r\n if (this._pageRowCount + 3 > this.pageSize){\r\n this.newPage(level);\r\n }\r\n this.createHeaders(row,level);\r\n this._currentTotals = this.createTotals();\r\n this._currentRowCount = 0;\r\n }\r\n if (this._pageRowCount >= this.pageSize){\r\n this.newPage(this._lastGroup + 1);\r\n }\r\n this.addRowTotals(row);\r\n this._currentRowCount++;\r\n this._pageRowCount++;\r\n this.items.push({type:\"row\",row,rowIndex:i});\r\n this._lineIndex++;\r\n lastRow = row;\r\n }\r\n this.createFooters(lastRow,0);\r\n this.items.push({type:\"last-row\",row:lastRow,footer:{totals:this.reportTotals,group:this.reportGroup}});\r\n this._lineIndex++;\r\n let pageIndex = this._pages[this._pages.length - 1];\r\n pageIndex.end = this._lineIndex;\r\n\r\n let reportGroup:IQueryGroupItem = {type:\"last-row\",header:{totals:this.reportTotals,group:this.reportGroup,label:null,text:null,value:null,row:firstRow}};\r\n return {items:this.items,pages:this._pages,summaryGroup: reportGroup}\r\n }\r\n\r\n private newPage(breakLevel:number){\r\n let pageIndex = this._pages[this._pages.length - 1];\r\n pageIndex.end = this._lineIndex;\r\n this._pages.push({start:this._lineIndex,end:this._lineIndex});\r\n this._pageRowCount = 0;\r\n if (breakLevel != -1){\r\n this.addPageHeaders(breakLevel);\r\n }\r\n }\r\n\r\n private addPageHeaders(level:number){\r\n for(let i = 0; i < level;i++){\r\n let header = this._currentHeaders[i];\r\n this.items.push({type:\"header\",level:i,header,row:header.row,continued:true});\r\n this._lineIndex++;\r\n this._pageRowCount++;\r\n }\r\n }\r\n\r\n public noGroups(rows:any[]):IQueryGroupMap{\r\n this.items = [];\r\n this._currentTotals = this.createTotals();\r\n this.reportTotals = this.createTotals();\r\n this._pages = [{start:0,end:0}];\r\n\r\n if (!rows.length) return;\r\n\r\n this._pageRowCount = 0;\r\n this._lineIndex = 0;\r\n\r\n let row;\r\n for (let i = 0; i < rows.length;i++){\r\n row = rows[i];\r\n if (this._pageRowCount >= this.pageSize){\r\n this.newPage(-1);\r\n }\r\n this.addRowTotals(row);\r\n this._currentRowCount++;\r\n this._pageRowCount++;\r\n this.items.push({type:\"row\",row,rowIndex:i});\r\n this._lineIndex++;\r\n }\r\n this.addTotals(this.reportTotals,this._currentTotals);\r\n if (this.definedTotals.length){\r\n this.items.push({type:\"last-row\",row,footer:{totals:this.reportTotals,group:this.reportGroup}});\r\n this._lineIndex++;\r\n }\r\n\r\n let pageIndex = this._pages[this._pages.length - 1];\r\n pageIndex.end = this._lineIndex;\r\n let reportGroup:IQueryGroupItem = {type:\"last-row\",header:{totals:this.reportTotals,group:this.reportGroup,label:null,text:null,value:null,row}};\r\n return {items:this.items,pages:this._pages,summaryGroup: reportGroup};\r\n }\r\n\r\n public getBreakLevel(row:any):number {\r\n for(let i = 0; i <= this._lastGroup;i++){\r\n let group = this.groups[i];\r\n let value = \"\";\r\n for(let s = 0; s < group.sort.length;s++){\r\n let sort = group.sort[s];\r\n value += row[sort.name] + \"|\";\r\n }\r\n if (value.toLowerCase() !== this._currentHeaders[i].value) return i;\r\n }\r\n return -1;\r\n }\r\n\r\n public createHeaders(row:any,level:number){\r\n for(let i = level; i <= this._lastGroup; i++){\r\n let group = this.groups[i];\r\n let value = \"\";\r\n for(let s = 0; s < group.sort.length;s++){\r\n let sort = group.sort[s];\r\n value += row[sort.name] + \"|\";\r\n }\r\n value = value.toLowerCase();\r\n let totals = this.createTotals();\r\n let innermost = i == this._lastGroup;\r\n let header : IQueryGroupHeader = {value,label:group.label,text:value,totals,group,innermost,row};\r\n this._currentHeaders[i] = header;\r\n this.items.push({type:\"header\",level:i,header,row});\r\n this._lineIndex++;\r\n this._pageRowCount++;\r\n }\r\n }\r\n\r\n public createFooters(row:any,level:number){\r\n for(let i = this._lastGroup ;i >= 0; i--){\r\n let group = this.groups[i];\r\n let header = this._currentHeaders[i];\r\n this.addTotals(header.totals,this._currentTotals);\r\n if (i >= level){\r\n let innermost = (i == this._lastGroup);\r\n let footer : IQueryGroupFooter = {totals:header.totals,group,innermost,row};\r\n this.items.push({type:\"footer\",level:i,footer,row});\r\n this._lineIndex++;\r\n this._pageRowCount++;\r\n }\r\n }\r\n this.addTotals(this.reportTotals,this._currentTotals);\r\n \r\n }\r\n\r\n private createTotals():any {\r\n let totals:IGroupTotalSet = {};\r\n \r\n for(let i = 0 ; i < this.definedTotals.length;i++){\r\n let defTotal = this.definedTotals[i];\r\n totals[defTotal.name] = defTotal.createTotal();\r\n }\r\n\r\n return totals;\r\n }\r\n\r\n private addTotals(target:IGroupTotalSet,source:IGroupTotalSet){\r\n let totals = this.definedTotals;\r\n for(let i =0 ; i < totals.length;i++){\r\n let total = totals[i];\r\n let targetValue = target[total.name];\r\n targetValue.add(source[total.name]);\r\n }\r\n }\r\n\r\n private addRowTotals(row:any){\r\n let totals = this.definedTotals;\r\n for(let i =0 ; i < totals.length;i++){\r\n let total = totals[i];\r\n let targetValue = this._currentTotals[total.name];\r\n targetValue.addRow(row); \r\n }\r\n\r\n }\r\n\r\n\r\n\r\n \r\n}\r\n\r\nexport interface ITotalAccumulator {\r\n addRow(row:any);\r\n add(source:ITotalAccumulator);\r\n readonly value:any;\r\n}\r\n\r\nexport class TotalSum implements ITotalAccumulator {\r\n field:string;\r\n private _value:number;\r\n\r\n constructor(field:string){\r\n this.field = field;\r\n this._value = 0;\r\n }\r\n addRow(row:any){\r\n this._value += row[this.field] || 0;\r\n }\r\n add(source:TotalSum){\r\n this._value += source.value;\r\n }\r\n get value():any {\r\n return this._value;\r\n }\r\n}\r\n\r\nexport class TotalRowCount implements ITotalAccumulator {\r\n private _value:number;\r\n\r\n constructor(){\r\n this._value = 0;\r\n }\r\n addRow(row:any){\r\n this._value += 1;\r\n }\r\n add(source:TotalSum){\r\n this._value += source.value;\r\n }\r\n get value():any {\r\n return this._value;\r\n }\r\n}\r\n\r\nexport class TotalAvg implements ITotalAccumulator {\r\n field:string;\r\n private _count:number;\r\n private _value:number;\r\n\r\n constructor(field:string){\r\n this.field = field;\r\n this._value = 0;\r\n this._count = 0;\r\n }\r\n addRow(row:any){\r\n this._value += row[this.field] || 0;\r\n this._count++;\r\n }\r\n add(source:TotalAvg){\r\n this._value += source._value;\r\n this._count += source._count;\r\n }\r\n get value():any {\r\n if (this._count){\r\n return this._value / this._count;\r\n }\r\n return 0;\r\n }\r\n}\r\n\r\nexport class TotalMin implements ITotalAccumulator {\r\n field:string;\r\n private _value:number;\r\n\r\n constructor(field:string){\r\n this.field = field;\r\n this._value = undefined;\r\n }\r\n addRow(row:any){\r\n let value = row[this.field] || 0;\r\n if (this._value === undefined){\r\n this._value = value;\r\n }\r\n else if (value < this._value){\r\n this._value = value;\r\n }\r\n }\r\n add(source:TotalMin){\r\n if (this._value === undefined){\r\n this._value = source._value;\r\n }\r\n else if (source._value < this._value){\r\n this._value = source._value;\r\n }\r\n }\r\n get value():any {\r\n return this._value || 0;\r\n }\r\n}\r\n\r\nexport class TotalMax implements ITotalAccumulator {\r\n field:string;\r\n private _value:number;\r\n\r\n constructor(field:string){\r\n this.field = field;\r\n this._value = undefined;\r\n }\r\n addRow(row:any){\r\n let value = row[this.field] || 0;\r\n if (this._value === undefined){\r\n this._value = value;\r\n }\r\n else if (value > this._value){\r\n this._value = value;\r\n }\r\n }\r\n add(source:TotalMax){\r\n if (this._value === undefined){\r\n this._value = source._value;\r\n }\r\n else if (source._value > this._value){\r\n this._value = source._value;\r\n }\r\n }\r\n get value():any {\r\n return this._value || 0;\r\n }\r\n}\r\n","import React from 'react';\r\nimport { IQueryGroupHeader } from 'core/CollectionGrouper';\r\n\r\nexport class DataGridGroupHeader extends React.Component<{\r\n header: IQueryGroupHeader;\r\n printElems:any;\r\n continued:boolean;\r\n columnHeaders?:any\r\n}> {\r\n private renderedRowDataVersion: number;\r\n\r\n /*\r\n shouldComponentUpdate(nextProps) {\r\n \r\n let query: Data.IQuery = nextProps.query;\r\n if (query.rowDataVersion != this.renderedRowDataVersion) {\r\n return true;\r\n }\r\n \r\n */\r\n\r\n render() {\r\n let header = this.props.header;\r\n let group = header.group;\r\n let className = \"RT-DataTable__group-header\";\r\n if (header.innermost){\r\n className += \" RT-DataTable--innermost\";\r\n }\r\n else {\r\n className += \" RT-DataTable--outer\";\r\n }\r\n let topRight;\r\n if (this.props.continued){\r\n topRight =
\r\n continued\r\n
\r\n }\r\n /*\r\n else {\r\n topRight =
\r\n Count {header.totals[\"rowCount\"].value}\r\n
\r\n }\r\n */\r\n \r\n return (\r\n
\r\n \r\n {topRight}\r\n {this.props.printElems}\r\n
\r\n \r\n \r\n {this.props.columnHeaders}\r\n
\r\n \r\n Total
);\r\n \r\n let className = \"RT-DataTable__group-footer\";\r\n if (this.props.isLastRow){\r\n className += \" RT-DataTable--last-row\";\r\n }\r\n else if (footer.innermost){\r\n className += \" RT-DataTable--innermost\";\r\n }\r\n else {\r\n className += \" RT-DataTable--outer\";\r\n }\r\n return ();\r\n }\r\n}","import { ClickThrottle } from 'components/helpers/ClickThrottle';\r\nimport { ActionRef, Collection, RenderEvent } from 'core';\r\nimport { IQueryGroupHeader } from 'core/CollectionGrouper';\r\nimport { DynamicRender } from 'core/DynamicRender';\r\nimport React from 'react';\r\nimport { IGridState } from './types';\r\n\r\nexport class BoardView extends React.Component<{gridState:IGridState}>{\r\n clickThrottle = new ClickThrottle();\r\n\r\n renderedDataVersion:number = -1;\r\n renderedGridVersion:number = -1;\r\n shouldComponentUpdate(nextProps){\r\n if (nextProps.dataVersion == this.renderedDataVersion && nextProps.layout && nextProps.layout.version == this.renderedGridVersion) return false;\r\n return true;\r\n }\r\n\r\n render(){\r\n let gridState = this.props.gridState;\r\n let grid = gridState.grid;\r\n this.renderedDataVersion = gridState.dataVersion;\r\n this.renderedGridVersion = grid.version;\r\n let rowElems = [];\r\n let rows = gridState.rows;\r\n if (!rows) return null;\r\n \r\n \r\n let groupMap = gridState.groupMap;\r\n if (groupMap){\r\n \r\n let currentPage = gridState.currentPage;\r\n let items = groupMap.items;\r\n \r\n \r\n let columnElems = [];\r\n let currentHeader:IQueryGroupHeader;\r\n let n = items.length;\r\n for(let i = 0; i < n;i++){\r\n let item = items[i];\r\n if (item.type == \"row\"){\r\n rowElems.push();\r\n }\r\n else if (item.type == \"header\"){\r\n currentHeader = item.header;\r\n }\r\n else if (item.type == \"footer\"){\r\n let column = \r\n columnElems.push(column);\r\n rowElems = [];\r\n }\r\n }\r\n return \r\n
\r\n
\r\n {columnElems}\r\n
\r\n
\r\n }\r\n else {\r\n for(let i = 0; i < rows.length;i++){\r\n let row = rows[i];\r\n rowElems.push(
);\r\n }\r\n }\r\n return rowElems;\r\n }\r\n \r\n}\r\n\r\n\r\nclass BoardColumn extends React.Component<{gridState:IGridState,header:IQueryGroupHeader,label:any}>{\r\n render(){\r\n let gridState = this.props.gridState;\r\n let grid = this.props.gridState.grid;\r\n let header = this.props.header;\r\n let childEvent = gridState.event.create({[grid.schema.name]:header.row,[grid.schema.name + \"$totals\"]:header.totals} as any);\r\n let label = DynamicRender.render(childEvent,this.props.label);\r\n return \r\n
\r\n
\r\n \r\n {this.props.children}\r\n
\r\n
\r\n {content}\r\n
\r\n }\r\n\r\n handleClick = (e:React.MouseEvent) => {\r\n this.props.clickThrottle.handle(e,null,()=> {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n let target:HTMLDivElement = e.target as any;\r\n let cell = target.closest(\"[data-col-index]\");\r\n let gridState = this.props.gridState;\r\n let grid = gridState.grid;\r\n let row = this.props.row;\r\n if (cell){\r\n let colIndex = parseInt(cell.getAttribute(\"data-col-index\"),10);\r\n let column = gridState.grid.columns[colIndex];\r\n \r\n let buttonName = column.action || column.onClickAction;\r\n if (buttonName){\r\n var anchor = target.closest(\"a\");\r\n if (!anchor) return; \r\n\r\n let canvas = gridState.event.canvas;\r\n let schema = gridState.grid.schema;\r\n\r\n gridState.collection.currentRow = row;\r\n gridState.event.canvas.update();\r\n \r\n let buttonRef = new ActionRef(canvas,buttonName,{[schema.name]:this.props.row});\r\n buttonRef.trigger();\r\n return;\r\n }\r\n }\r\n gridState.collection.currentRow = row;\r\n gridState.event.canvas.update();\r\n if (grid.onRowClick){\r\n \r\n let scope = {[gridState.grid.schema.name]:row};\r\n let rowKey = Collection.getRowKey(row,grid.schema);\r\n grid.onRowClick.trigger({current:row,value:rowKey,table:gridState.rows,scope});\r\n }\r\n else {\r\n gridState.event.canvas.update();\r\n }\r\n \r\n \r\n \r\n \r\n });\r\n }\r\n}","\r\nimport React from 'react';\r\nimport { Broadcast, ActionRef, RenderEvent ,CollectionRef, FieldFormatter, Canvas, ComponentStyles, ContextMenuHandler, ContextMenuHandlerArgs} from 'core';\r\nimport { Collection, CollectionArray, ICollectionGroup, ICollectionSortField } from 'core/Collection';\r\nimport { CollectionGrouper, IQueryGroupFooter, IQueryGroupHeader, IQueryGroupMap, IReportTotal, ITotalAccumulator, TotalRowCount, TotalSum } from 'core/CollectionGrouper';\r\nimport { IRecordSchema, Schema } from 'core/Schema';\r\nimport { ClickThrottle } from '../helpers/ClickThrottle';\r\nimport {DataGridGroupHeader} from './DataGridGroupHeader';\r\nimport { DataGridGroupFooter } from './DataGridGroupFooter';\r\nimport { DynamicRender } from 'core/DynamicRender';\r\nimport { Line } from 'components/Line';\r\nimport { Popup } from 'components/popups/Popup';\r\nimport { AnchorPoint } from 'components/helpers/AnchorPoint';\r\nimport { Icon } from 'components/Icon';\r\nimport { BoardView } from './BoardView';\r\nimport { GridViewType, IDataGrid, IDataGridColumn, IDataGridLayout, IDataGridTotal, IGridState, IRowContextMenuItem } from './types';\r\nimport { ElementContextMenu } from 'components/studio/ElementContextMenu';\r\nimport { collapseTextChangeRangesAcrossMultipleVersions } from 'typescript';\r\n\r\n\r\n\r\n\r\n\r\nconst selectorWidth = 50;\r\n\r\n\r\nexport class DataTable extends React.Component<{event?:RenderEvent,$id?:string,collection:CollectionRef\r\n ,whenEmpty?:any,actions?:any,search?:any,onRefresh?:ActionRef,layout?:IDataGridLayout,totalBar?:any,label:string,\r\n onRowClick?:ActionRef}>{\r\n render(): React.ReactNode {\r\n \r\n \r\n if (this.props.whenEmpty){\r\n let collection = this.props.collection;\r\n if (!collection || !collection.rows || collection.rows.length == 0){\r\n return this.props.whenEmpty;\r\n }\r\n }\r\n let actions = this.props.actions;\r\n \r\n return \r\n }\r\n}\r\nexport class DataTablePresenter extends React.Component<{event?:RenderEvent;$id:string;defaultView?:string,collection:CollectionRef\r\n ,layout?:IDataGridLayout,emptyState?:any,withShell?:boolean,actions?:any,search?:any,onRefresh?:ActionRef,totalBar?:any,label?:string,\r\n onRowClick?:ActionRef}>{\r\n\r\n \r\n broadcast = new Broadcast();\r\n\r\n containerRef: React.RefObject = React.createRef();\r\n headerContainer :React.RefObject = React.createRef();\r\n \r\n grid:IDataGrid;\r\n\r\n groupMap:IQueryGroupMap;\r\n currentPage = 0;\r\n currentView:string;\r\n \r\n renderedPageVersion:string;\r\n renderedLayout:any;\r\n renderedCollectionVersion:number;\r\n contextMenuHandler:ContextMenuHandler;\r\n\r\n clickThrottle = new ClickThrottle();\r\n\r\n\r\n constructor(props){\r\n super(props);\r\n let canvas = this.props.event.canvas;\r\n this.contextMenuHandler = canvas.app.contextMenuManager.createHandler(canvas,this.handleContextMenuClick);\r\n\r\n }\r\n componentDidMount(){\r\n this.broadcast.connect(this);\r\n let canvas = this.props.event.canvas;\r\n canvas.app.contextMenuManager.connect(this.contextMenuHandler);\r\n let collection = this.props.collection;\r\n if (collection){\r\n canvas.connectDataListener(this,collection.name,(action,rows:CollectionArray)=> {\r\n canvas.sidebarState.isOpen = false;\r\n canvas.sidebarContent = null;\r\n this.createGrid(this.props.layout,canvas,collection,rows); \r\n this.formatData(canvas,rows);\r\n })\r\n \r\n }\r\n \r\n window.addEventListener(\"resize\",this.measure);\r\n if (this.grid && this.grid.columns && !this.grid.measured){\r\n this.measure();\r\n }\r\n \r\n }\r\n\r\n componentWillUnmount(){\r\n this.broadcast.disconnect(this);\r\n let canvas = this.props.event.canvas;\r\n canvas.disconnectDataListener(this);\r\n if (this.contextMenuHandler){\r\n canvas.app.contextMenuManager.disconnect(this.contextMenuHandler);\r\n }\r\n window.removeEventListener(\"resize\",this.measure);\r\n }\r\n\r\n componentDidUpdate(){\r\n if (this.grid && this.grid.columns && !this.grid.measured){\r\n this.measure();\r\n }\r\n }\r\n\r\n formatData(canvas:Canvas,rows:any[]){\r\n \r\n let grid = this.grid;\r\n if (!rows || !this.grid) return;\r\n \r\n let sort:ICollectionSortField[] = [];\r\n if (grid.groups){\r\n for(let i = 0; i < grid.groups.length;i++){\r\n let group = grid.groups[i];\r\n if (group.sort){\r\n for(let j = 0; j < group.sort.length;j++){\r\n sort.push(group.sort[j]);\r\n }\r\n }\r\n }\r\n }\r\n if (grid.sort){\r\n for(let i = 0; i < grid.sort.length; i++){\r\n sort.push(grid.sort[i]);\r\n }\r\n }\r\n if (sort && sort.length){\r\n Collection.sort(rows,grid.schema,sort);\r\n }\r\n let grouper = new CollectionGrouper();\r\n grouper.pageSize = grid.pageSize || 25;\r\n grouper.groups = grid.groups;\r\n grouper.reportGroup = grid.reportGroup;\r\n grouper.definedTotals = grid.totals;\r\n this.groupMap = grouper.groupRows(rows);\r\n this.currentPage = 0;\r\n let collection = this.props.collection;\r\n let currentRow = Collection.getCurrentRow(canvas,collection.name);\r\n if (!currentRow && rows.length){\r\n Collection.setCurrentRow(canvas,collection.name,rows[0]);\r\n }\r\n }\r\n\r\n \r\n\r\n render(){\r\n let collection = this.props.collection;\r\n let rows:any[];\r\n let canvas = this.props.event.canvas;\r\n if (collection){ \r\n rows = collection.rows;\r\n if (!this.grid || this.renderedPageVersion != canvas.pageInfo.version || this.renderedLayout != this.props.layout){\r\n this.createGrid(this.props.layout,canvas,collection,rows); //todo: detect layout change ?\r\n }\r\n let version = Collection.getVersion(rows);\r\n if (!this.grid || version != this.renderedCollectionVersion){\r\n this.currentView = this.props.defaultView;\r\n this.formatData(canvas,rows);\r\n }\r\n this.renderedCollectionVersion = version;\r\n }\r\n else {\r\n return null;\r\n }\r\n \r\n let grid = this.grid;\r\n \r\n let totalWidth = grid.totalWidth;\r\n if (grid.rowSelector){\r\n totalWidth += selectorWidth;\r\n }\r\n let bodyStyle:React.CSSProperties = {\r\n position:\"relative\",\r\n minWidth:\"100%\",\r\n width:totalWidth\r\n }\r\n\r\n let isGrouped:boolean = (grid.groups && grid.groups.length != 0)\r\n\r\n let gridState:IGridState = {\r\n collection,\r\n rows,\r\n groupMap:this.groupMap,\r\n currentPage:this.currentPage,\r\n grid,\r\n dataVersion:this.renderedCollectionVersion,\r\n event:this.props.event,\r\n broadcast:this.broadcast,\r\n isGrouped\r\n }\r\n\r\n let style:React.CSSProperties = {};\r\n style.display = \"flex\";\r\n style.flexDirection = \"column\";\r\n style.height = \"100%\";\r\n style.width = \"100%\";\r\n style.overflow = \"hidden\";\r\n \r\n let reportHeader;\r\n let gridContent;\r\n\r\n \r\n if (grid.viewType == 'board'){\r\n gridContent = \r\n }\r\n else {\r\n\r\n let columnHeaders;\r\n if (!gridState.isGrouped && !grid.hideHeader){\r\n columnHeaders = (\r\n \r\n )\r\n }\r\n if (collection.rows){\r\n let className = \"RT-DataTable RT-DataTable--pull-padding\";\r\n if (isGrouped){\r\n className += \" RT-DataTable--grouped\";\r\n }\r\n gridContent = ( \r\n \r\n
\r\n {columnHeaders}\r\n
\r\n \r\n
\r\n
\r\n
\r\n \r\n {searchProps.children}\r\n \r\n
)\r\n }\r\n }\r\n let contextMenuId;\r\n if (this.contextMenuHandler){\r\n contextMenuId = this.contextMenuHandler.id;\r\n }\r\n \r\n let popup;\r\n if (this.contextMenuHandler && this.contextMenuHandler.isOpen){\r\n popup = this.renderPopup();\r\n }\r\n \r\n return \r\n {popup}\r\n {searchPanel}\r\n {this.renderButtonBar(gridState)}\r\n {reportHeader}\r\n {gridContent}\r\n
\r\n }\r\n\r\n handleClick = (e:React.MouseEvent) => {\r\n \r\n if (e.ctrlKey){\r\n e.preventDefault();\r\n e.stopPropagation();\r\n let canvas = this.props.event.canvas;\r\n canvas.viewSource();\r\n\r\n }\r\n }\r\n\r\n handleContextMenuClick = (args:ContextMenuHandlerArgs) => {\r\n\r\n \r\n\r\n let target = args.target;\r\n let rowElem = target.closest('[data-row-index]');\r\n let row;\r\n if (rowElem){\r\n\r\n let rowIndex = parseInt(rowElem.getAttribute(\"data-row-index\"),10);\r\n let collection = this.props.collection;\r\n let row = collection.rows[rowIndex];\r\n collection.currentRow = row;\r\n }\r\n /*\r\n if (!this.grid.rowMenu || !this.grid.rowMenu.length){\r\n this.props.event.canvas.update();\r\n return;\r\n }\r\n */\r\n let elem = target.closest('[data-elem-id]');\r\n if (elem){\r\n this.contextMenuHandler.elemId = elem.getAttribute(\"data-elem-id\");\r\n }\r\n else {\r\n this.contextMenuHandler.elemId = null;\r\n }\r\n this.contextMenuHandler.rect = args.rect;\r\n this.contextMenuHandler.row = row;\r\n this.contextMenuHandler.open();\r\n \r\n }\r\n\r\n renderPopup(){\r\n let handler = this.contextMenuHandler;\r\n return ();\r\n }\r\n\r\n renderMenu = ()=> {\r\n /*\r\n let elementContextMenu = \r\n */\r\n\r\n let content = \r\n \r\n
\r\n return content;\r\n }\r\n\r\n handlePopupForceClose = () => {\r\n this.contextMenuHandler.isOpen = false;\r\n this.forceUpdate();\r\n }\r\n\r\n measure = () => {\r\n let grid = this.grid;\r\n let columns = grid.columns;\r\n if (!columns.length) return;\r\n let definedWidth = 0;\r\n let stretchColumn:IDataGridColumn;\r\n\r\n for(let i = 0; i < columns.length;i++){\r\n let col = columns[i];\r\n if (col.stretch){\r\n stretchColumn = col;\r\n }\r\n else {\r\n definedWidth += col.width;\r\n }\r\n }\r\n grid.measured = true;\r\n if (!stretchColumn) return;\r\n\r\n let availableWidth = this.containerRef.current.offsetWidth;\r\n let stretchWidth = availableWidth - definedWidth - 30;\r\n if (stretchWidth < 100){\r\n stretchWidth = 100;\r\n }\r\n Grid.setWidth(grid,stretchColumn,stretchWidth);\r\n grid.version++;\r\n \r\n this.broadcast.refresh();\r\n }\r\n\r\n createGrid(layout:IDataGridLayout,canvas:Canvas,collection:CollectionRef,rows:CollectionArray){\r\n \r\n if (!layout && rows && rows.$$meta){\r\n layout = rows.$$meta.tableLayout;\r\n }\r\n this.grid = Grid.create(canvas,layout,collection.schema);\r\n this.renderedPageVersion = canvas.pageInfo.version;\r\n this.renderedLayout = layout;\r\n if (this.props.onRowClick){\r\n this.grid.onRowClick = this.props.onRowClick;\r\n }\r\n else if (collection.schema.onRowClick){\r\n this.grid.onRowClick = new ActionRef(canvas,collection.schema.onRowClick,this.props.event.scope);\r\n }\r\n if (collection.schema.onSelectorClick){\r\n this.grid.onSelectorClick = new ActionRef(canvas,collection.schema.onSelectorClick,this.props.event.scope);\r\n }\r\n if (this.props.onRefresh){\r\n this.grid.onRefresh = this.props.onRefresh;\r\n }\r\n }\r\n \r\n renderButtonBar(gridState:IGridState) {\r\n if (gridState.grid.hideHeader) return null;\r\n let actions;\r\n if (this.props.actions){\r\n actions = this.props.actions;\r\n }\r\n \r\n let verbose;\r\n \r\n let queryPopulated:boolean; // populated ?\r\n let rowCount:number;\r\n let collection = this.props.collection;\r\n if (collection && collection.rows){\r\n queryPopulated = true;\r\n rowCount = collection.rows.length;\r\n }\r\n let viewSelector;\r\n let countElem;\r\n\r\n if (!queryPopulated && !actions && !this.props.totalBar) return null;\r\n\r\n if (queryPopulated){\r\n let pagination;\r\n let groupMap = this.groupMap;\r\n if (groupMap){ \r\n let numPages = groupMap.pages.length;\r\n if (numPages > 1){\r\n pagination = \r\n }\r\n }\r\n let refresh;\r\n if (gridState.grid.onRefresh){\r\n refresh = ()\r\n }\r\n\r\n let tableView;\r\n let boardView;\r\n \r\n if (gridState.grid.columns && gridState.grid.columns.length){\r\n tableView = \r\n }\r\n if (gridState.grid.cardContent){\r\n boardView = \r\n }\r\n if (rowCount == 1){\r\n countElem = \r\n {rowCount} row\r\n
\r\n }\r\n else if (rowCount){\r\n countElem = \r\n {rowCount} rows\r\n
\r\n }\r\n else{\r\n countElem = \r\n No rows\r\n
\r\n }\r\n\r\n verbose = \r\n \r\n {tableView}\r\n {boardView}\r\n {refresh}\r\n
{countElem}
\r\n {pagination}\r\n \r\n
\r\n \r\n
);\r\n */\r\n }\r\n\r\n // if (!actions && !verbose) return null;\r\n let totalBarElem;\r\n let totalBar = this.props.totalBar;\r\n let collectionName = gridState.collection.name;\r\n\r\n if (totalBar && totalBar.props){\r\n let renderContent = totalBar.props.render_children;\r\n if (renderContent && gridState.groupMap && gridState.groupMap.summaryGroup){\r\n let summaryGroup = gridState.groupMap.summaryGroup;\r\n let childEvent = this.props.event.create({[collectionName]:summaryGroup.row,[collectionName + \"$totals\"]:summaryGroup.header.totals} as any);\r\n totalBarElem = renderContent(childEvent);\r\n }\r\n }\r\n \r\n let id = this.props.$id;\r\n let className = \"RT-DataTable__list-actions\";\r\n if (!queryPopulated){\r\n className += \" RT-DataTable__list-actions--no-rows\";\r\n }\r\n\r\n let labelElem;\r\n if (this.props.label){\r\n labelElem = {this.props.label}
\r\n }\r\n\r\n return (\r\n \r\n {labelElem}\r\n {actions}\r\n {totalBarElem}\r\n {verbose}\r\n {viewSelector}\r\n \r\n \r\n
\r\n }\r\n\r\n handleClick = (e:React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n let gridState = this.props.gridState;\r\n gridState.grid.viewType = this.props.viewType;\r\n let settings = gridState.event.canvas.getSettings();\r\n settings.viewType = this.props.viewType;\r\n Collection.incrementVersion(gridState.rows);\r\n gridState.broadcast.refresh();\r\n }\r\n}\r\n\r\nclass GridRows extends React.Component<{gridState:IGridState}>{\r\n clickThrottle = new ClickThrottle();\r\n\r\n renderedDataVersion:number = -1;\r\n renderedGridVersion:number = -1;\r\n shouldComponentUpdate(nextProps){\r\n if (nextProps.dataVersion == this.renderedDataVersion && nextProps.layout && nextProps.layout.version == this.renderedGridVersion) return false;\r\n return true;\r\n }\r\n\r\n render(){\r\n let gridState = this.props.gridState;\r\n let grid = gridState.grid;\r\n this.renderedDataVersion = gridState.dataVersion;\r\n this.renderedGridVersion = grid.version;\r\n let rowElems = [];\r\n let rows = gridState.rows;\r\n if (!rows) return null;\r\n \r\n let groupMap = gridState.groupMap;\r\n if (groupMap){\r\n let currentPage = gridState.currentPage;\r\n let items = groupMap.items;\r\n \r\n let pageIndex = groupMap.pages[currentPage];\r\n if (!pageIndex) return null;\r\n\r\n let start = pageIndex.start;\r\n let n = pageIndex.end;\r\n\r\n for(let i = start; i < n;i++){\r\n let item = items[i];\r\n if (item.type == \"row\"){\r\n let isActive = false; // (query.activeRowIndex == item.rowIndex);\r\n \r\n rowElems.push();\r\n }\r\n \r\n else if (item.type == \"header\"){\r\n let printElems = this.renderGroupHeaderContent(item.header);\r\n let columnHeaders;\r\n if (item.header.innermost){\r\n columnHeaders = (\r\n \r\n )\r\n }\r\n rowElems.push()\r\n }\r\n else if (item.type == \"footer\"){ \r\n let content = this.renderGroupFooterContent(item.footer);\r\n if (item.footer.totals && item.footer.totals.length){\r\n content = \r\n \r\n {content}\r\n
\r\n }\r\n if (content){\r\n rowElems.push({content});\r\n }\r\n }\r\n else if (item.type == \"last-row\"){\r\n let content = this.renderGroupFooterContent(item.footer);\r\n let marginLeft;\r\n let marginRight;\r\n if (gridState.isGrouped){\r\n marginLeft = 0;\r\n marginRight = 0;\r\n }\r\n else {\r\n marginLeft = -10;\r\n marginRight = -10;\r\n }\r\n if (item.footer.totals && item.footer.totals.length){\r\n content = \r\n
\r\n \r\n
\r\n {content}\r\n
\r\n
\r\n {item.label}\r\n
\r\n
\r\n {formatted}\r\n
\r\n
\r\n
\r\n {item.label}\r\n
\r\n
\r\n {formatted}\r\n
\r\n
{item.label}
)\r\n }\r\n \r\n }\r\n return \r\n
{left}
\r\n
{right}
\r\n
\r\n
\r\n
{display}
\r\n
\r\n {cells}\r\n
\r\n }\r\n\r\n handleClick = (e:React.MouseEvent) => {\r\n this.props.clickThrottle.handle(e,null,()=> {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n let target:HTMLDivElement = e.target as any;\r\n let cell = target.closest(\"[data-col-index]\");\r\n let gridState = this.props.gridState;\r\n let grid = gridState.grid;\r\n let row = this.props.row;\r\n if (cell){\r\n let colIndex = parseInt(cell.getAttribute(\"data-col-index\"),10);\r\n let column = gridState.grid.columns[colIndex];\r\n \r\n let buttonName = column.action || column.onClickAction;\r\n if (!buttonName && column.onClick){\r\n buttonName = column.name;\r\n }\r\n if (buttonName){\r\n var anchor = target.closest(\"a\");\r\n if (!anchor) return; \r\n\r\n let targetPos = {x:e.clientX,y:e.clientY};\r\n \r\n let canvas = gridState.event.canvas;\r\n let schema = gridState.grid.schema;\r\n\r\n gridState.collection.currentRow = row;\r\n gridState.event.canvas.update();\r\n let collectionName = gridState.collection.name;\r\n let buttonRef = new ActionRef(canvas,buttonName,{[collectionName]:this.props.row});\r\n if (column.onClick){\r\n buttonRef.statements = column.onClick;\r\n }\r\n let rowKey = Collection.getRowKey(row,grid.schema);\r\n buttonRef.trigger({targetPos,current:row,value:rowKey,table:gridState.rows});\r\n return;\r\n }\r\n if (column.onClick){\r\n\r\n }\r\n }\r\n gridState.collection.currentRow = row;\r\n gridState.event.canvas.update();\r\n if (grid.onRowClick){\r\n \r\n let scope = {[gridState.collection.name]:row};\r\n let rowKey = Collection.getRowKey(row,grid.schema);\r\n grid.onRowClick.trigger({current:row,value:rowKey,table:gridState.rows,scope});\r\n }\r\n else {\r\n gridState.event.canvas.update();\r\n }\r\n \r\n \r\n \r\n \r\n });\r\n }\r\n\r\n \r\n renderSelectorCell(row:any) {\r\n let checked = Collection.isRowSelected(row);\r\n return (\r\n \r\n \r\n {this.props.children}
\r\n } \r\n}\r\n\r\nclass ColumnarHeader extends React.Component<{gridState:IGridState,rows:any[],grouped:boolean}>{\r\n render(){\r\n let gridState = this.props.gridState;\r\n let grid = gridState.grid;\r\n let columns = grid.columns;\r\n\r\n if (!columns) return null;\r\n var elems = [];\r\n let rows = this.props.rows;\r\n let offset = 0;\r\n if (grid.rowSelector){\r\n offset = selectorWidth;\r\n elems.push(this.renderHeaderSelectorCell());\r\n }\r\n let broadcast = gridState.broadcast;\r\n for (var i = 0; i < columns.length; i++) {\r\n let col = columns[i];\r\n elems.push()\r\n }\r\n return elems;\r\n }\r\n\r\n handleColumnResize = () => {\r\n let gridState = this.props.gridState;\r\n gridState.grid.version++;\r\n gridState.broadcast.refresh();\r\n }\r\n\r\n renderHeaderSelectorCell() {\r\n let checked = this.props.gridState.selectAllValue;\r\n return \r\n \r\n
\r\n }\r\n\r\n handleSelectorChange = (e:React.ChangeEvent) => {\r\n let target = e.target;\r\n let checked = target.checked;\r\n let gridState = this.props.gridState;\r\n gridState.selectAllValue = checked;\r\n Grid.setSelected(gridState.rows,checked);\r\n fireSelectorChanged(gridState,null);\r\n gridState.grid.version++;\r\n gridState.broadcast.refresh();\r\n // let query = this.props.query;\r\n // query.toggleSelectAll(checked);\r\n };\r\n}\r\n\r\nclass HeaderCell extends React.Component<{broadcast:Broadcast,rows:any[],layout:IDataGrid,column:IDataGridColumn,offset:number,onResize:() => void}>{\r\n render() {\r\n let col = this.props.column;\r\n let style:React.CSSProperties;\r\n let offset = this.props.offset;\r\n\r\n if (col.width) {\r\n style = { position: \"absolute\", left: col.left + offset, width: col.width, top: 0, bottom: 0, cursor: \"pointer\" };\r\n }\r\n else {\r\n style = { position: \"absolute\", left: col.left + offset, top: 0, bottom: 0, right: 0, cursor: \"pointer\" }\r\n }\r\n if (col.align == 'right'){\r\n style.justifyContent = \"flex-end\";\r\n }\r\n else if (col.align == \"center\"){\r\n style.justifyContent = \"center\";\r\n }\r\n let sort = Grid.getColumnSort(this.props.layout,col);\r\n let sortElem;\r\n if (sort){\r\n if (sort.descending) {\r\n sortElem = ;\r\n }\r\n else {\r\n sortElem = ;\r\n }\r\n }\r\n\r\n let resizeHandle = \r\n return {col.label}{sortElem}{resizeHandle}
;\r\n }\r\n\r\n\r\n\r\n handleClick = (e: React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n Grid.setSort(this.props.layout,this.props.column);\r\n Collection.incrementVersion(this.props.rows);\r\n this.props.broadcast.refresh();\r\n }\r\n}\r\n\r\n\r\nclass TotalRow extends React.Component<{gridState:IGridState,row:any,totals:any}>{\r\n render(){\r\n let elems = [];\r\n let columns = this.props.gridState.grid.columns;\r\n let totals = this.props.totals;\r\n let row = this.props.row;\r\n for(let i =0 ; i < columns.length; i++){\r\n let col = columns[i];\r\n if (i == 0){\r\n elems.push(Total
)\r\n } \r\n else if (!col.total){\r\n elems.push({'\\u00A0'}
)\r\n }\r\n else {\r\n elems.push();\r\n }\r\n \r\n }\r\n let rowStyle:React.CSSProperties = {height:30,position:\"relative\",marginLeft:-15,marginRight:-15};\r\n return {elems}
\r\n }\r\n}\r\n\r\nclass TotalCell extends React.Component<{row:any,totals:any,column:IDataGridColumn}> {\r\n render(){\r\n let col = this.props.column;\r\n let style:React.CSSProperties;\r\n let offset = 0;\r\n\r\n if (col.width) {\r\n style = { position: \"absolute\", left: col.left + offset, width: col.width, top: 0, bottom: 0};\r\n }\r\n else {\r\n style = { position: \"absolute\", left: col.left + offset, top: 0, bottom: 0, right: 0}\r\n }\r\n let cellClasses:string[] = ['RT-DataTable__cell'];\r\n if (col.align == \"right\"){\r\n cellClasses.push(\"align-right\");\r\n }\r\n let value = this.props.totals[col.total].value;\r\n let content = FieldFormatter.format(value,col.type,col.format);\r\n return {content}
\r\n\r\n }\r\n}\r\n\r\nclass SortDirectionDesc extends React.Component {\r\n render(){\r\n return \r\n }\r\n}\r\n\r\nclass SortDirectionAsc extends React.Component {\r\n render(){\r\n return \r\n }\r\n}\r\n\r\n\r\nclass ColumnResizeHandle extends React.Component<{layout:IDataGrid,column:IDataGridColumn,onResize:()=> void},{startX:number,currentWidth:number,newWidth:number,moving:boolean}> {\r\n\r\n minWidth = 45;\r\n constructor(props){\r\n super(props);\r\n this.state = {\r\n currentWidth:0,\r\n startX:0,\r\n newWidth:0,\r\n moving:false\r\n }\r\n }\r\n render() {\r\n let right = -8;\r\n let css = \"RT-DataTable__resize-handle\";\r\n if (this.state.moving){\r\n // right -= (this.state.newWidth - this.state.currentWidth);\r\n css += \" RT-DataTable__resize-handle--moving\";\r\n }\r\n return \r\n }\r\n\r\n handleClick = (e:React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n }\r\n\r\n handleMouseDown = (e: React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n this.setState({\r\n startX:e.clientX,\r\n currentWidth:this.props.column.width,\r\n newWidth:this.props.column.width,\r\n moving:true\r\n })\r\n document.addEventListener(\"mousemove\",this.handleMouseMove,true);\r\n document.addEventListener(\"mouseup\",this.handleMouseUp,true)\r\n\r\n }\r\n\r\n handleMouseUp = e => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n document.removeEventListener(\"mousemove\",this.handleMouseMove,true);\r\n document.removeEventListener(\"mouseup\",this.handleMouseUp,true);\r\n let change = e.clientX - this.state.startX;\r\n let col = this.props.column;\r\n let newWidth = this.state.currentWidth + change;\r\n if (newWidth < this.minWidth){\r\n newWidth = this.minWidth;\r\n }\r\n Grid.setWidth(this.props.layout,col,newWidth); \r\n this.setState({\r\n moving:false\r\n })\r\n }\r\n\r\n handleMouseMove = e => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n let change = e.clientX - this.state.startX;\r\n let newWidth = this.state.currentWidth + change;\r\n if (newWidth < this.minWidth){\r\n newWidth = this.minWidth;\r\n }\r\n this.setState ({\r\n newWidth\r\n })\r\n let col = this.props.column;\r\n Grid.setWidth(this.props.layout,col,newWidth);\r\n this.props.onResize();\r\n }\r\n}\r\n\r\n\r\nclass Grid {\r\n\r\n static create(canvas:Canvas,layout:IDataGridLayout,schema:IRecordSchema):IDataGrid {\r\n\r\n \r\n let grid:IDataGrid;\r\n if (layout){\r\n let totals = Grid.buildTotals(layout.totals);\r\n let settings = canvas.getSettings();\r\n let viewType= settings.viewType || 'columnar';\r\n grid = {\r\n rowSelector:layout.rowSelector,\r\n columns:layout.columns,\r\n schema,\r\n sort:layout.sort,\r\n groups:layout.groups,\r\n reportGroup: layout.reportGroup,\r\n version:1,\r\n totals,\r\n cardContent:layout.cardContent,\r\n rowMenu:layout.rowMenu,\r\n viewType,\r\n pageSize:layout.pageSize,\r\n hideHeader:layout.hideHeader,\r\n hideRowCount:layout.hideRowCount,\r\n tableStyle:layout.tableStyle\r\n }\r\n Grid.computeColumns(grid);\r\n for(let i = 0; i < grid.columns.length;i++){\r\n let col = grid.columns[i];\r\n if (col.action){\r\n let action = canvas.actions[col.action];\r\n if (action && action.styles){\r\n col.getStyle = (event:RenderEvent,row:any) => {\r\n let styles = event.canvas.getValue(action.styles,{scope:{[schema.name]:row}});\r\n if (styles){\r\n return event.computeStyles(styles);\r\n }\r\n }\r\n }\r\n }\r\n else {\r\n if (col.styles){\r\n col.getStyle = (event:RenderEvent,row:any) => {\r\n let styles = event.canvas.getValue(col.styles,{scope:{[schema.name]:row}});\r\n if (styles){\r\n return event.computeStyles(styles);\r\n }\r\n }\r\n }\r\n let field = Schema.getFieldDef(schema,col.name);\r\n if (field){\r\n if (field.styles && !col.getStyle){\r\n col.getStyle = (event:RenderEvent,row:any) => {\r\n \r\n let styles = event.canvas.getValue(field.styles,{scope:{[schema.name]:row}});\r\n if (styles){\r\n return event.computeStyles(styles);\r\n }\r\n }\r\n }\r\n if (field.suffixExpression){\r\n col.getSuffix = (event:RenderEvent,row:any) => {\r\n return event.canvas.getValue(field.suffixExpression,{scope:{[schema.name]:row}})\r\n }\r\n }\r\n }\r\n }\r\n }\r\n if (layout.rowStyleExpression){\r\n grid.getRowStyle = (event:RenderEvent,row:any) => {\r\n let styles = event.canvas.getValue(layout.rowStyleExpression,{scope:{[schema.name]:row}});\r\n if (styles){\r\n return event.computeStyles(styles);\r\n }\r\n }\r\n }\r\n }\r\n else {\r\n grid = {schema,version:1,columns:[],groups:[],reportGroup:null};\r\n }\r\n return grid;\r\n }\r\n\r\n static setWidth(grid:IDataGrid,column:IDataGridColumn,newWidth:number){\r\n column.width = newWidth;\r\n Grid.computeColumns(grid);\r\n }\r\n\r\n static buildTotals(totals:IDataGridTotal[]):IReportTotal[] {\r\n let out:IReportTotal[] = [];\r\n if (totals){\r\n for(let i = 0; i < totals.length;i++){\r\n let item = totals[i];\r\n let createTotal:() => ITotalAccumulator;\r\n if (item.totalType == \"sum\"){\r\n createTotal = () => new TotalSum(item.field);\r\n }\r\n else {\r\n createTotal = () => new TotalSum(item.field);\r\n }\r\n let reportTotal:IReportTotal = {\r\n name:item.name,\r\n label:item.label,\r\n fieldType:item.fieldType,\r\n createTotal\r\n }\r\n out.push(reportTotal);\r\n }\r\n }\r\n let rowCountTotal:IReportTotal = {\r\n name:\"rowCount\",\r\n label:\"Count\",\r\n fieldType:\"integer\",\r\n createTotal: () => new TotalRowCount()\r\n }\r\n out.push(rowCountTotal);\r\n\r\n return out;\r\n }\r\n static computeColumns(layout:IDataGrid){\r\n let left = 0;\r\n let totalWidth = 0;\r\n let columns = layout.columns;\r\n for(let i =0; i < columns.length;i++){\r\n let col = columns[i];\r\n col.left = left;\r\n if (!col.width){\r\n col.width = 140;\r\n }\r\n left += col.width;\r\n totalWidth += col.width;\r\n }\r\n layout.totalWidth = totalWidth;\r\n }\r\n\r\n static setSort(layout:IDataGrid,column:IDataGridColumn){\r\n let current =layout.sort;\r\n if (current && current.length == 1){\r\n let currentSortField = current[0];\r\n if (currentSortField.name == column.name){\r\n currentSortField.descending = !currentSortField.descending;\r\n return;\r\n }\r\n }\r\n layout.sort = [{name:column.name,descending:false}];\r\n }\r\n\r\n static getColumnSort(layout:IDataGrid,column:IDataGridColumn):ICollectionSortField {\r\n if (!layout.sort) return null;\r\n for(let i = 0; i < layout.sort.length;i++){\r\n let item = layout.sort[i];\r\n if (item.name == column.name) return item;\r\n }\r\n }\r\n\r\n static setSelected(rows:any[],value:boolean){\r\n for(let i =0 ; i < rows.length;i++){\r\n let row = rows[i];\r\n Collection.setRowSelected(row,value);\r\n }\r\n }\r\n}\r\n\r\n\r\n\r\nclass Pagination extends React.Component<{currentPage:number,numPages:number,onClick:(pageNumber:number) => void}>{\r\n render(){\r\n let numPages = this.props.numPages;\r\n let currentPage = this.props.currentPage;\r\n let style:React.CSSProperties = {userSelect:\"none\"};\r\n if (numPages > 7){\r\n \r\n let prev;\r\n let next;\r\n \r\n let start = currentPage - 2;\r\n if (start < 2){\r\n start = 2;\r\n }\r\n let end = start + 4;\r\n if (end > numPages - 1){\r\n end = numPages - 1;\r\n start = end - 4;\r\n }\r\n \r\n if (start > 2){\r\n prev = \r\n start++;\r\n }\r\n if (end < numPages -1){\r\n next = \r\n end--;\r\n }\r\n let rangeElems = [];\r\n let i = start;\r\n while (i <= end){\r\n rangeElems.push()\r\n i++;\r\n }\r\n return \r\n
\r\n {prev}\r\n {rangeElems}\r\n {next}\r\n
\r\n
\r\n
\r\n {elems}\r\n
\r\n
Found {rowCount} {objectLabel} where {tokenContent}
\r\n }\r\n else {\r\n return Found {rowCount} {objectLabel}
\r\n }\r\n }\r\n renderTokens(tokens:any[]){\r\n let elems = [];\r\n if (tokens){\r\n for(var i = 0; i < tokens.length;i++){\r\n var item = tokens[i];\r\n let style:any = {};\r\n if (item.token == \"field\"){\r\n style.fontWeight = 500;\r\n style.color = \"#888b8d\";\r\n }\r\n else if (item.token == \"value\"){\r\n style.color = \"#000\";\r\n style.fontWeight = 500;\r\n }\r\n elems.push({item.value});\r\n }\r\n }\r\n return elems;\r\n }\r\n\r\n\r\n}\r\n\r\ninterface IDropMenuOption {\r\n name:string;\r\n label:string;\r\n}\r\n\r\nclass SidebarDropMenu extends React.Component<{active:IDropMenuOption,options:IDropMenuOption[],onChoose:(option:IDropMenuOption) => void},{open:boolean}>{\r\n\r\n dropRef:React.RefObject = React.createRef();\r\n \r\n state= {open:false}\r\n render(){\r\n let label;\r\n if (this.props.active){\r\n label = this.props.active.label;\r\n }\r\n else {\r\n label = \"Select\"\r\n }\r\n let popup;\r\n if (this.state.open){\r\n popup = this.renderPopup();\r\n }\r\n return <>\r\n \r\n
{label}
\r\n
\r\n {this.renderAngleDown()}\r\n
\r\n
\r\n {elems}\r\n
\r\n return content;\r\n\r\n\r\n }\r\n handleOptionClick = (option:IDropMenuOption) => {\r\n this.setState({open:false});\r\n this.props.onChoose(option);\r\n }\r\n handleClick = (e:React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n this.setState({open:true});\r\n }\r\n\r\n handlePopupForceClose = () => {\r\n this.setState({open:false});\r\n }\r\n\r\n renderAngleDown(){\r\n return ();\r\n }\r\n\r\n}\r\n\r\nclass DropMenuItem extends React.Component<{isActive:boolean;option:IDropMenuOption, onClick:(option:IDropMenuOption) => void}>{\r\n render(){\r\n let option = this.props.option;\r\n let icon;\r\n if (this.props.isActive){\r\n icon = \r\n \r\n
\r\n }\r\n else {\r\n icon = \r\n }\r\n return
\r\n {icon}\r\n {option.label}\r\n \r\n }\r\n\r\n handleClick = (e:React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n this.props.onClick(this.props.option);\r\n }\r\n}\r\n\r\n\r\nclass RowContextMenu extends React.Component<{grid:IDataGrid,handler:ContextMenuHandler,collection:CollectionRef}>{\r\n render(){\r\n let elems = [];\r\n let rowMenu = this.props.grid.rowMenu;\r\n if (!rowMenu) return null;\r\n let handler = this.props.handler;\r\n let collectionName = this.props.collection.name;\r\n let scope = {[collectionName]:handler.row};\r\n for(let i = 0; i < rowMenu.length;i++){\r\n let item = rowMenu[i];\r\n let disabled = false;\r\n if (item.disableIf){\r\n let test = handler.canvas.getValue(item.disableIf,{scope});\r\n if (test){\r\n disabled = true;\r\n }\r\n }\r\n elems.push(
);\r\n\r\n }\r\n return elems;\r\n }\r\n handleClick = (item:IRowContextMenuItem) => {\r\n let handler = this.props.handler;\r\n let collectionName = this.props.collection.name;\r\n let scope = {[collectionName]:handler.row};\r\n handler.trigger(item.action,scope);\r\n }\r\n}\r\n\r\nclass RowContextMenuItem extends React.Component<{option:IRowContextMenuItem, disabled:boolean,onClick:(option:IRowContextMenuItem) => void}>{\r\n render(){\r\n let option = this.props.option;\r\n let icon;\r\n if (option.icon){\r\n icon = \r\n \r\n
\r\n }\r\n let opacity = (this.props.disabled) ? 0.3 : 1;\r\n return \r\n {icon}\r\n {option.label}\r\n \r\n }\r\n\r\n handleClick = (e:React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n if (this.props.disabled) return;\r\n\r\n this.props.onClick(this.props.option);\r\n }\r\n}","import { RenderEvent } from 'core';\r\nimport React, { ReactText } from 'react';\r\nimport { MainMenuLaunch } from './MainNavMenu';\r\n\r\nexport class PortalBanner extends React.Component<{event:RenderEvent,company?:string,themeColor?:string;\r\n logoFile?:string,logoSize?:string}>{\r\n render(): React.ReactNode {\r\n if (this.props.event.canvas.app.codeDesignerEnabled) return null;\r\n \r\n let content:any[];\r\n if (this.props.children){\r\n content = [];\r\n let index = 0;\r\n React.Children.forEach(this.props.children,(child:any) => {\r\n if (child && child.props){\r\n if (content.length) {\r\n content.push(|
);\r\n }\r\n content.push(child);\r\n index++\r\n }\r\n });\r\n \r\n }\r\n let launch;\r\n launch = \r\n \r\n
\r\n return (\r\n \r\n {this.renderLogo()}\r\n
{this.props.company}
\r\n
\r\n {content}\r\n {launch}\r\n
\r\n \r\n
\r\n
\r\n
\r\n \r\n
);\r\n content = \r\n }\r\n let navStrip;\r\n let contentLeft = 0;\r\n if (this.props.navstrip){\r\n navStrip = ( \r\n {this.props.navstrip}\r\n
);\r\n contentLeft = 66;\r\n }\r\n let header;\r\n if (!app.studioOpen){\r\n header = this.props.header;\r\n }\r\n return (<>\r\n {navStrip}\r\n \r\n {header}\r\n
\r\n {content}\r\n
\r\n
{this.props.children}
\r\n }\r\n}","import { Application, RenderEvent } from 'core';\r\nimport React, { ReactFragment } from 'react';\r\nimport { AnchorPoint } from './helpers/AnchorPoint';\r\nimport { Icon } from './Icon';\r\nimport { Popup } from './popups/Popup';\r\n\r\n\r\n\r\nexport class LayoutNavStrip extends React.Component<{event:RenderEvent}>{\r\n\r\n componentDidMount(){\r\n let app = this.props.event.canvas.app;\r\n app.studioBroadcast.connect(this);\r\n }\r\n\r\n componentWillUnmount(){\r\n let app = this.props.event.canvas.app;\r\n app.studioBroadcast.disconnect(this);\r\n }\r\n\r\n render(){\r\n let app = this.props.event.canvas.app;\r\n \r\n let content= this.renderAppContent();\r\n \r\n return <>\r\n \r\n {content}\r\n
\r\n \r\n }\r\n\r\n renderAppContent(){\r\n let event = this.props.event;\r\n let app = event.canvas.app;\r\n let activeName = app.currentWorkspace;\r\n\r\n let editPage;\r\n let settings;\r\n\r\n return <>\r\n \r\n {this.props.children}\r\n
\r\n \r\n {editPage}\r\n {settings}\r\n
\r\n
\r\n \r\n
\r\n return content;\r\n\r\n\r\n }\r\n\r\n handleClick = (option:IDropMenuOption) => {\r\n if (option.name == \"signout\"){\r\n this.props.app.session.signout();\r\n }\r\n\r\n }\r\n\r\n}\r\n\r\n\r\ninterface IDropMenuOption {\r\n name:string;\r\n label:string;\r\n}\r\n\r\nclass DropMenuItem extends React.Component<{option:IDropMenuOption, onClick:(option:IDropMenuOption) => void}>{\r\n render(){\r\n let option = this.props.option;\r\n return \r\n {option.label}\r\n \r\n }\r\n\r\n handleClick = (e:React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n this.props.onClick(this.props.option);\r\n }\r\n}\r\n","import { makeComponent } from '../core';\r\nimport React from 'react';\r\n\r\nexport const Footer = makeComponent( class extends React.Component<{$id:string}>{\r\n render(){\r\n return ({this.props.children}
);\r\n }\r\n});","import { makeComponent } from '../core';\r\nimport React from 'react';\r\n\r\nexport const Header = makeComponent( class extends React.Component<{$id:string,title:any}>{\r\n render(){\r\n return this.props.children || null;\r\n }\r\n});\r\n\r\n","import { makeComponent } from '../core';\r\nimport React from 'react';\r\n\r\nexport const ActionBar = makeComponent( class extends React.Component<{$id:string}>{\r\n render() {\r\n return this.props.children || null;\r\n }\r\n});","\r\n\r\nimport React from 'react';\r\nimport {makeComponent, RenderEvent} from '../core'; \r\n\r\n\r\nexport const WhenEmpty = makeComponent(class WhenEmpty extends React.Component<{event?:RenderEvent,$id?:string,label?:string,icon?:string}>{\r\n render(): React.ReactNode {\r\n return this.props.children || null;\r\n }\r\n});\r\n\r\n\r\n\r\n","import { ActionRef, CollectionRef, makeComponent, RenderEvent } from '../core';\r\nimport React from 'react';\r\n\r\ntype RenderFunc = (event:RenderEvent) => any;\r\n\r\nexport const ForEach = makeComponent( class extends React.Component<{event:RenderEvent,$id:string,collection:CollectionRef,whenEmpty?:any,render_row?:RenderFunc}>{\r\n render() {\r\n return null; // rendered in dynamic render\r\n }\r\n});\r\n\r\nexport class NumberedList extends React.Component<{event:RenderEvent,$id:string,collection:CollectionRef,whenEmpty?:any,render_row?:RenderFunc}>{\r\n render(): React.ReactNode {\r\n\r\n let collection = this.props.collection;\r\n if (!collection && !collection.rows) return null;\r\n\r\n let event = this.props.event;\r\n let rows = collection.rows;\r\n let elems = [];\r\n let index = 0;\r\n let renderRow = this.props.render_row;\r\n if (rows.length){\r\n for(let i = 0 ; i < rows.length;i++){\r\n let row = rows[i];\r\n let rowEvent = event.forCollectionRow(collection,row,i)\r\n let rowContent = renderRow(rowEvent);\r\n if (rowContent){\r\n elems.push({rowContent});\r\n index++;\r\n }\r\n }\r\n }\r\n else if(this.props.whenEmpty){\r\n elems = this.props.whenEmpty;\r\n }\r\n return \r\n {elems}\r\n
\r\n }\r\n}\r\n\r\nclass NumberedListItem extends React.Component<{event:RenderEvent,collection:CollectionRef,row:any,index:number}>{\r\n render(){\r\n let rowIndex = this.props.index + 1;\r\n let currentRow = this.props.collection.currentRow;\r\n let selected = (this.props.row == currentRow);\r\n \r\n let indexStyle:React.CSSProperties = {display:\"flex\",alignItems:'center',justifyContent:'center',width:26,height:26,\r\n backgroundColor:\"rgb(232,234,240)\",borderRadius:99,marginRight:12,fontWeight:500,fontSize:\"13px\",lineHeight:0};\r\n if (selected){\r\n indexStyle.backgroundColor = \"#468ffd\";\r\n indexStyle.color = \"#fff\";\r\n }\r\n let rowIndexElem = (\r\n {rowIndex}\r\n
)\r\n let cardStyle:React.CSSProperties = {\r\n padding:\"10px 15px\",borderRadius:4,flexGrow:1};\r\n let cardClass = \"hover-selector\";\r\n if (selected){\r\n cardClass += \" is-active\";\r\n }\r\n return \r\n {rowIndexElem}\r\n
\r\n {this.props.children}\r\n
\r\n
\r\n {this.renderHeader(data,this.props.actions)}\r\n
\r\n {this.renderBody(data)}\r\n
\r\n
{'>'}
)\r\n }\r\n let value = this.getCategoryValue(data,i);\r\n if (i == level && i > 1 && !data.child_categories.length){\r\n elems.push(this.renderChooseWrapper(\"siblings\",this.renderSiblingCategories(data,i)))\r\n }\r\n else {\r\n elems.push()\r\n }\r\n }\r\n if (data.child_categories.length){\r\n let childCategories = [];\r\n for(let i = 0; i < data.child_categories.length;i++){\r\n let categ = data.child_categories[i];\r\n childCategories.push();\r\n } \r\n elems.push({'>'}
)\r\n elems.push(this.renderChooseWrapper(\"child-cat\",childCategories))\r\n }\r\n categoriesElem = (\r\n {elems}\r\n
);\r\n }\r\n let actionBar;\r\n if (this.props.actions){\r\n actionBar = \r\n {actions}\r\n
\r\n }\r\n return \r\n \r\n
\r\n {categoriesElem}\r\n {actionBar}\r\n
\r\n
\r\n
CHOOSE SUB-CATEGORY
\r\n
{content}
\r\n
\r\n {this.props.sidebar}\r\n
);\r\n }\r\n \r\n return (\r\n
\r\n
\r\n \r\n \r\n \r\n PRODUCT | \r\n AVAILABLE QTY | \r\n
\r\n \r\n {elems}\r\n
\r\n \r\n
\r\n {sidebarElem}\r\n
\r\n {this.props.descrip} | \r\n \r\n | \r\n
)\r\n }\r\n\r\n handleClick = (e:React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n let canvas = this.props.event.canvas;\r\n let field = canvas.getFieldRef(\"@selected_product_id\",null);\r\n canvas.setValue(field,this.props.product_id);\r\n }\r\n}\r\n\r\nclass ProductQtyCell extends React.Component<{cart_qty?:number,theme:any,value:number}>{\r\n render(): React.ReactNode {\r\n let cart_qty = this.props.cart_qty;\r\n let value = this.props.value;\r\n let theme = this.props.theme;\r\n \r\n if (cart_qty > 0) {\r\n let fill = (value >= cart_qty) ? theme.cartValueColor: theme.cartValueWarningColor;\r\n let icon = ;\r\n return (\r\n \r\n\r\n
{NumberFormatter.formatNumber(cart_qty)}
\r\n
{icon}
\r\n
\r\n\r\n
{NumberFormatter.formatNumber(value)}
\r\n
{icon}
\r\n
{formatted}
\r\n }\r\n }\r\n\r\n}","import { Icon } from 'components/Icon';\r\nimport { CollectionRef } from 'core/CollectionRef';\r\nimport { DateFormatter, NumberFormatter } from 'core/FieldFormatter';\r\nimport React from 'react';\r\n\r\ninterface IItem {\r\n expected_date:string;\r\n qty:number;\r\n}\r\n\r\nexport class FutureStock extends React.Component<{available_qty:number,items:CollectionRef,theme:any}>{\r\n render(){\r\n let availQty = this.props.available_qty;\r\n let collection = this.props.items;\r\n let items:IItem[];\r\n if (collection){\r\n items = collection.rows;\r\n }\r\n \r\n let theme = this.props.theme;\r\n if (!theme){\r\n theme = {circleCheckColor:\"rgb(7,136,0)\"};\r\n }\r\n let elems:any[] = [];\r\n let showFirstAvail = true;\r\n if (availQty > 0){\r\n // showFirstAvail = false;\r\n }\r\n if (items){\r\n for(let i =0 ; i < items.length;i++){\r\n let line = items[i];\r\n availQty = availQty + line.qty;\r\n let icon;\r\n if (availQty > 0 && showFirstAvail){\r\n icon = ;\r\n //showFirstAvail = false;\r\n }\r\n elems.push( \r\n
{DateFormatter.format(line.expected_date,\"mmm d\")}
\r\n
+{NumberFormatter.formatNumber(line.qty)}
\r\n
{NumberFormatter.formatNumber(availQty)}
\r\n
{icon}
\r\n
No future stock
;\r\n }\r\n\r\n return (<>\r\n \r\n
Future Stock
\r\n
Available Qty
\r\n
\r\n {DynamicRender.render(this.props.event,this.props.source)}\r\n
\r\n }\r\n}","import { Icon } from \"components/Icon\";\r\nimport { FieldRef, RenderEvent } from \"core\";\r\nimport { NumberFormatter } from \"core/FieldFormatter\";\r\nimport React from \"react\";\r\nimport {theme} from \"./ProductBreadcrumbs\";\r\n\r\nexport class AvailableQtyCell extends React.Component<{event:RenderEvent,field:FieldRef,cartQty?:number}>{\r\n render(): React.ReactNode {\r\n let cart_qty = this.props.cartQty;\r\n let value;\r\n let field = this.props.field;\r\n if (this.props.field){\r\n value = field.value;\r\n }\r\n \r\n \r\n if (cart_qty > 0) {\r\n let fill = (value >= cart_qty) ? theme.cartValueColor: theme.cartValueWarningColor;\r\n let icon = ;\r\n return (\r\n \r\n\r\n
{NumberFormatter.formatNumber(cart_qty)}
\r\n
{icon}
\r\n
\r\n\r\n
{NumberFormatter.formatNumber(value)}
\r\n
{icon}
\r\n
{formatted}
\r\n }\r\n }\r\n\r\n}","\r\nimport { timeStamp } from 'console';\r\nimport { ActionRef, ContextMenuHandler, ContextMenuHandlerArgs, RenderEvent } from 'core';\r\nimport { HoverPopupHandler, HoverPopupHandlerArgs } from 'core/HoverPopupHandler';\r\nimport React from 'react';\r\nimport { AnchorPoint } from './helpers/AnchorPoint';\r\nimport { ClickThrottle } from './helpers/ClickThrottle';\r\nimport { Icon } from './Icon';\r\nimport { Popup } from './popups/Popup';\r\nimport { StudioEditorChildren} from './studio/StudioEditorChildren';\r\n\r\n\r\nexport class Container extends React.Component<{event:RenderEvent,styles?:string,onClick?:ActionRef,$id:string,$elem:any}>{\r\n\r\n clickThrottle:ClickThrottle;\r\n hoverPopupHandler:HoverPopupHandler;\r\n \r\n\r\n componentDidMount(){\r\n let canvas = this.props.event.canvas;\r\n if (this.props.onClick){\r\n // this.hoverPopupHandler = canvas.app.hoverPopupManager.createHandler(canvas,this.handleShowHover);\r\n }\r\n \r\n }\r\n\r\n componentWillUnmount(){\r\n let canvas = this.props.event.canvas;\r\n if (this.hoverPopupHandler){\r\n canvas.app.hoverPopupManager.disconnect(this.hoverPopupHandler);\r\n }\r\n \r\n }\r\n render(){\r\n let styles = this.props.event.computeStyles(this.props.styles);\r\n let style:React.CSSProperties;\r\n let hoverPopup;\r\n let dataHoverPopupId;\r\n let contextMenuId;\r\n\r\n if (this.props.onClick){\r\n style = {...styles.style,cursor:\"pointer\"};\r\n if (this.hoverPopupHandler){\r\n dataHoverPopupId = this.hoverPopupHandler.id;\r\n }\r\n }\r\n else {\r\n style = styles.style;\r\n }\r\n if (this.hoverPopupHandler && this.hoverPopupHandler.isOpen){\r\n hoverPopup = this.renderHoverPopup();\r\n }\r\n \r\n let content = this.props.children;\r\n let event = this.props.event;\r\n if (event.designMode){\r\n let elem = this.props.$elem;\r\n content = \r\n }\r\n return (<>\r\n {content}\r\n
\r\n {hoverPopup}\r\n ) \r\n }\r\n\r\n handleClick = (e:React.MouseEvent) => {\r\n if (this.props.onClick){\r\n \r\n this.clickThrottle = this.clickThrottle || new ClickThrottle();\r\n this.clickThrottle.handle(e,null,() => {\r\n \r\n e.preventDefault();\r\n e.stopPropagation();\r\n let target = e.target as HTMLElement;\r\n let targetPos;\r\n if (target){\r\n targetPos = {x:e.clientX,y:e.clientY};\r\n }\r\n this.props.onClick.trigger({targetPos});\r\n });\r\n \r\n }\r\n }\r\n\r\n renderHoverPopup(){\r\n let handler = this.hoverPopupHandler;\r\n return ();\r\n }\r\n\r\n handlePopupForceClose = () => {\r\n if (this.hoverPopupHandler){\r\n this.hoverPopupHandler.close();\r\n }\r\n this.forceUpdate();\r\n }\r\n \r\n\r\n renderHoverMenu = ()=> {\r\n return (This is a hover popup
)\r\n }\r\n\r\n \r\n\r\n handleShowHover = (args:HoverPopupHandlerArgs) => {\r\n\r\n \r\n this.hoverPopupHandler.x = args.x + 20;\r\n this.hoverPopupHandler.y = args.y;\r\n this.hoverPopupHandler.isOpen = true;\r\n this.forceUpdate();\r\n \r\n \r\n }\r\n};\r\n\r\n\r\nexport class MenuLaunch extends React.Component<{event:RenderEvent,onClick:ActionRef}>{\r\n\r\n render(){\r\n return \r\n \r\n
\r\n }\r\n\r\n handleClick = (e:React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n if (this.props.onClick){\r\n let target = e.target as HTMLElement;\r\n let targetPos;\r\n if (target){\r\n targetPos = {x:e.clientX,y:e.clientY};\r\n }\r\n this.props.onClick.trigger({targetPos});\r\n }\r\n }\r\n}\r\n","import React from 'react';\r\n\r\n\r\nexport class InNavbar extends React.Component<{$id:string,width?:any,overlayBody?:boolean,collapsible?:boolean}>{\r\n render(){\r\n return this.props.children || null;\r\n }\r\n}","import { Icon } from 'components/Icon';\r\nimport { DisplayProps } from 'components/PutField';\r\nimport { IFieldOption } from 'core/RecordMeta';\r\nimport React from 'react';\r\n\r\n\r\nconst filterCheckedBackground = \"var(--rt-primary-bg-color)\";\r\nconst filterCheckedFill = \"#fff\";\r\n\r\nexport class MultiOptionFilter extends React.Component {\r\n render(){\r\n \r\n return \r\n }\r\n}\r\n\r\nexport class SingleOptionFilter extends React.Component {\r\n render(){\r\n \r\n return \r\n }\r\n}\r\n\r\nclass Presenter extends React.Component {\r\n\r\n state = {expanded:false};\r\n\r\n render() {\r\n let field = this.props.field;\r\n if (!field) return null;\r\n let label = field.label;\r\n let options = this.renderOptions();\r\n let clearElem;\r\n if (this.props.allowMultiple){\r\n clearElem = (CLEAR);\r\n }\r\n let toggleElem;\r\n if (!this.state.expanded){\r\n toggleElem= \r\n \r\n
\r\n }\r\n else {\r\n toggleElem = \r\n \r\n
\r\n }\r\n \r\n return \r\n
\r\n
\r\n {toggleElem}\r\n
{label}
\r\n
\r\n \r\n {/*
ALL| */}\r\n {clearElem}\r\n
\r\n
{options}
\r\n
\r\n \r\n
;\r\n }\r\n style.fontWeight = 500;\r\n backgroundColor = \"#fff\";\r\n boxBackground = filterCheckedBackground;\r\n boxBorder = \"solid 1px \" + filterCheckedBackground;\r\n }\r\n else {\r\n backgroundColor = \"#fff\";\r\n boxBorder = \"solid 1px #000\";\r\n }\r\n let label = this.props.option.label;\r\n if (label == \"?\"){\r\n label = \"All\";\r\n }\r\n let borderRadius = this.props.isMultiSelect ? 0 : 9999;\r\n\r\n return \r\n
\r\n {icon}\r\n
\r\n
{label}
\r\n
\r\n {this.props.children}\r\n
\r\n }\r\n}","import { Canvas, RenderEvent, Url } from 'core';\r\nimport React from 'react';\r\nimport { HelpButton } from './HelpButton';\r\nimport { Icon } from './Icon';\r\n\r\nexport class PageTitle extends React.Component<{event:RenderEvent,recordName?:any,icon?:any,styles?:string,image:string,imageSize:any}>{\r\n render(){\r\n let canvas = this.props.event.canvas;\r\n \r\n if (canvas.renderDesignSlot){\r\n return canvas.renderDesignSlot(this.props.event,\"title\");\r\n }\r\n \r\n let styles = this.props.event.computeStyles(null,this.props.styles);\r\n \r\n let title;\r\n let subtitle;\r\n if (this.props.recordName){\r\n title = this.props.recordName;\r\n subtitle = canvas.subtitle || canvas.title;\r\n }\r\n else {\r\n title = canvas.title;\r\n subtitle = canvas.subtitle;\r\n }\r\n \r\n\r\n if (canvas.layer == \"dialog\" || canvas.layer == \"lookup\" || canvas.layer == \"dialog-stack\" || canvas.layer == \"popup\"){\r\n return this.renderForDialog(canvas,title);\r\n }\r\n\r\n let helpTopic = canvas.getHelpTopic(\"$page\");\r\n \r\n let entityLabelElem;\r\n if (subtitle){\r\n entityLabelElem = ();\r\n }\r\n let recordLink = this.getLinkHref();\r\n let titleElem;\r\n let titleStyle:React.CSSProperties;\r\n \r\n if (canvas.layer == \"stack\" && canvas.parent.stackPosition == \"overlay\"){\r\n titleStyle = styles.style; // {fontWeight:500,fontSize:\"20px\",...styles.style};\r\n }\r\n else {\r\n titleStyle = styles.style;\r\n }\r\n let titleClass = \"RT-Record-Header__title\";\r\n if (styles.className){\r\n titleClass += \" \" + styles.className;\r\n }\r\n\r\n let iconElem;\r\n if (canvas.icon){\r\n iconElem = \r\n \r\n
\r\n }\r\n else {\r\n iconElem = this.props.icon;\r\n }\r\n \r\n let helpElem;\r\n if (helpTopic){\r\n helpElem = \r\n \r\n
\r\n }\r\n\r\n if (recordLink){\r\n titleElem = (\r\n \r\n \r\n )\r\n }\r\n else {\r\n titleElem = \r\n {entityLabelElem}\r\n
\r\n {title}\r\n {helpElem}\r\n
\r\n
\r\n \r\n
\r\n }\r\n */\r\n\r\n let children;\r\n if (this.props.children){\r\n children = \r\n {this.props.children}\r\n
\r\n }\r\n return (\r\n {iconElem}\r\n {titleElem}\r\n {children}\r\n
);\r\n\r\n }\r\n\r\n renderForDialog(canvas:Canvas,title:any){\r\n \r\n let icon;\r\n if (this.props.icon){\r\n icon = (\r\n {this.props.icon}\r\n
)\r\n }\r\n /*\r\n else if (this.props.style == \"success\"){\r\n icon = (\r\n {DialogIcons.renderSuccessIcon({fill:\"#3fc5d9\",width:26,height:26})}\r\n
)\r\n }\r\n */\r\n let subTitle;\r\n if (canvas.subtitle){\r\n subTitle = {canvas.subtitle}
\r\n }\r\n \r\n return(\r\n {icon}\r\n
\r\n {subTitle}\r\n
{title}
\r\n
\r\n
\r\n {cancelButton}\r\n {this.props.children}\r\n
\r\n );\r\n }\r\n\r\n renderConfirming(){\r\n let styles = this.props.event.computeStyles(null,this.props.styles);\r\n\r\n \r\n let className = [\"RT-Dialog-Buttons\",styles.className].join(' ');\r\n\r\n return (\r\n \r\n
This page contains unsaved changes
\r\n
\r\n
\r\n
\r\n \r\n
\r\n }\r\n let children = this.props.children;\r\n if (!children) return null;\r\n let className = 'RT-Stacked';\r\n if (this.props.spacing){\r\n className += ' RT-Stacked--' + this.props.spacing;\r\n }\r\n let style:React.CSSProperties = {display:\"flex\",flexDirection:\"column\"};\r\n if (this.props.verticalCenter){\r\n style.alignSelf = \"center\";\r\n }\r\n return \r\n {this.props.children}\r\n
\r\n }\r\n}","import React from 'react';\r\n\r\n\r\nexport class InTotalBar extends React.Component<{render_children:any}>{\r\n render(){\r\n return null;\r\n }\r\n}","import { ActionRef, ComponentStyles, FieldFormatter, FieldType, makeComponent, RenderEvent } from '../core';\r\nimport React from 'react';\r\nimport { ClickThrottle } from './helpers/ClickThrottle';\r\n\r\nexport const Value = makeComponent( class extends React.Component<{event:RenderEvent,value:any;\r\n styles?:string,labelStyles?:string,label?:any,onClick?:ActionRef,icon?:any,suffix?:any,labelPosition?:string}>{\r\n render1(){\r\n \r\n let styles = this.props.event.computeStyles(null,this.props.styles);\r\n let textElem;\r\n \r\n if (styles.format){\r\n textElem = FieldFormatter.format(this.props.value,null,styles.format);\r\n }\r\n else {\r\n textElem = this.props.value;\r\n }\r\n \r\n let className = ['RT-Text'];\r\n \r\n className.push(styles.className);\r\n return {textElem}\r\n }\r\n\r\n render(){\r\n\r\n let styles = this.props.event.computeStyles(this.props.styles);\r\n let value;\r\n let labelStyles = this.props.event.computeStyles(this.props.labelStyles);\r\n \r\n if (styles.format){\r\n value = FieldFormatter.format(this.props.value,null,styles.format);\r\n }\r\n else {\r\n value = this.props.value;\r\n }\r\n\r\n let content;\r\n \r\n let contentClasses = ['RT-Static-Field__content'];\r\n \r\n \r\n if (this.props.styles){\r\n contentClasses.push(styles.className);\r\n }\r\n \r\n\r\n \r\n let valueElem;\r\n let isLogical = false;\r\n if (isLogical){\r\n if (value){\r\n valueElem = \r\n {this.renderStaticCheckmark()}\r\n
Yes
\r\n
{this.props.suffix}
\r\n }\r\n contentStyle.gap = 5;\r\n contentStyle.display = \"flex\";\r\n contentStyle.alignItems = \"center\";\r\n content = <>\r\n {this.props.icon}\r\n {content}\r\n {suffix}\r\n \r\n }\r\n let outerClass = \"RT-Static-Field\";\r\n \r\n let outerStyle:React.CSSProperties = {};\r\n let bullet;\r\n if (this.props.labelPosition == \"bullet\"){\r\n outerStyle.display = \"flex\";\r\n outerStyle.alignItems = \"center\";\r\n outerStyle.gap = 4;\r\n bullet = {'\\u2022'}
\r\n }\r\n\r\n return (\r\n \r\n {labelElem}\r\n {bullet}\r\n
\r\n {content}\r\n
\r\n
\r\n
\r\n
\r\n {elems}\r\n
\r\n
\r\n \r\n
\r\n }\r\n else {\r\n checkboxElem = ()\r\n }\r\n return {checkboxElem}
\r\n }\r\n\r\n handleClick = (e:React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n let event = this.props.event;\r\n Collection.setRowSelected(this.props.row,!Collection.isRowSelected(this.props.row));\r\n \r\n if (this.props.onSelect){\r\n this.props.onSelect.trigger({scope:event.scope});\r\n }\r\n else {\r\n event.canvas.update();\r\n }\r\n }\r\n}","import { Icon } from 'components/Icon';\r\nimport { ActionRef, RenderEvent } from 'core';\r\nimport React from 'react';\r\n\r\nexport class StudioMenuItem extends React.Component<{event:RenderEvent;target:string,label:string,description?:string,\r\n icon?:string,name:string;value:string;onClick:ActionRef,asLink?:boolean,checked?:boolean}>{\r\n render(){\r\n\r\n let desc;\r\n if (this.props.description){\r\n desc = ({this.props.description}
);\r\n }\r\n let icon;\r\n if (this.props.icon){\r\n icon = \r\n }\r\n\r\n let style:React.CSSProperties;\r\n style = {display:\"flex\",alignItems:\"center\",gap:6,\r\n borderRadius:4,margin:5,letterSpacing:\"0.3px\"};\r\n let checked = (this.props.checked) ?
\r\n : \r\n\r\n return
\r\n {checked}\r\n {icon}\r\n \r\n {this.props.label}\r\n {desc}\r\n {this.props.children}\r\n
\r\n \r\n }\r\n\r\n handleClick = (e:React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n let event = this.props.event;\r\n event.canvas.app.contextMenuManager.closeAll();\r\n /*\r\n if (event.canvas.layer == \"dialog\"){\r\n if (Dialog.studioStack.length){\r\n Dialog.studioStack = [];\r\n Dialog.broadcast.refresh();\r\n }\r\n }\r\n */\r\n event.canvas.studioCommandBuffer.menuClick(this.props.target,this.props.name,this.props.value);\r\n event.canvas.studioCommandBuffer.send();\r\n /*\r\n if (this.props.onClick){\r\n this.props.onClick.trigger({value:{name:this.props.name,target:this.props.target,value:this.props.value}});\r\n }\r\n */\r\n }\r\n}","import { ActionRef, RenderEvent } from 'core';\r\nimport { Expressions } from 'core/studio/Expressions';\r\nimport React from 'react';\r\n\r\nexport class StudioPropEditor extends React.Component<{event:RenderEvent,name:string,target:string,value:string,type:string,label:string,width:any,onChange:ActionRef}>{\r\n\r\n value:string;\r\n editValue:string;\r\n dirty:boolean;\r\n\r\n constructor(props){\r\n super(props)\r\n if (this.props.type == \"expr\"){\r\n this.value = Expressions.toDisplayValue(this.props.value);\r\n }\r\n else {\r\n this.value = this.props.value;\r\n }\r\n }\r\n\r\n render(): React.ReactNode {\r\n let value = this.dirty ? this.editValue : this.value;\r\n let label = this.props.label;\r\n let inputStyle:React.CSSProperties = {flexGrow:1,border:'solid 1px var(--rt-text-color)',borderRadius:4,padding:5};\r\n return
\r\n }\r\n\r\n handleChange = (e: React.ChangeEvent) => {\r\n var target = e.target as HTMLTextAreaElement;\r\n this.dirty = true;\r\n this.editValue = target.value;\r\n this.forceUpdate();\r\n };\r\n\r\n handleBlur = (e: React.FocusEvent) => {\r\n if (!this.dirty)\r\n return;\r\n\r\n this.value = this.editValue;\r\n let newValue;\r\n if (this.props.type == \"expr\"){\r\n newValue = Expressions.fromDisplayValue(this.editValue);\r\n }\r\n else {\r\n newValue = this.editValue;\r\n }\r\n let canvas = this.props.event.canvas;\r\n\r\n canvas.studioCommandBuffer.setProp(this.props.target,this.props.name,newValue);\r\n \r\n if (this.props.onChange){ \r\n this.props.onChange.trigger();\r\n }\r\n else {\r\n canvas.studioCommandBuffer.send();\r\n }\r\n \r\n this.dirty = false;\r\n this.forceUpdate();\r\n };\r\n\r\n}","import React from 'react';\r\nimport { FilterField } from './FilterField';\r\nimport { Icon } from './Icon';\r\nimport { DisplayProps } from './PutField';\r\n\r\nexport class InlineEditor extends React.Component
{\r\n\r\n state = {editing:false,editValue:\"\"};\r\n ref = React.createRef();\r\n\r\n setFocus:boolean;\r\n\r\n render(){\r\n let field = this.props.field;\r\n let label = this.props.label || field.label;\r\n \r\n let content;\r\n if (this.state.editing){\r\n content = \r\n
\r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n
\r\n
{field.formattedValue}
\r\n
\r\n \r\n \r\n {content}\r\n
)\r\n }\r\n\r\n componentDidUpdate(){\r\n if (this.setFocus){\r\n this.setFocus = false;\r\n this.ref.current.focus();\r\n }\r\n }\r\n\r\n handleClick = (e:React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n if (!this.state.editing){\r\n this.setFocus = true;\r\n this.setState({editing:true,editValue:this.props.field.formattedValue});\r\n }\r\n }\r\n\r\n handleChange = (e:React.ChangeEvent) => {\r\n this.setState({editValue:e.target.value});\r\n }\r\n\r\n handleCommitClick = (e:React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n this.commitValue();\r\n }\r\n\r\n commitValue(){\r\n let field = this.props.field;\r\n let newValue = this.state.editValue;\r\n this.setState({editing:false,editValue:\"\"});\r\n field.setValue(newValue);\r\n }\r\n handleCancelClick = (e:React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n this.setState({editing:false,editValue:\"\"});\r\n }\r\n\r\n handleKeyPress = (e:React.KeyboardEvent) => {\r\n if (e.key == \"Enter\"){\r\n e.preventDefault();\r\n e.stopPropagation();\r\n this.commitValue();\r\n }\r\n else if (e.key == \"Escape\"){\r\n this.setState({editing:false,editValue:\"\"});\r\n }\r\n }\r\n\r\n handleKeyDown = (e:React.KeyboardEvent) => {\r\n if (e.key == \"Escape\"){\r\n this.setState({editing:false,editValue:\"\"});\r\n }\r\n }\r\n}","import { CollectionRef, FieldFormatter, RenderEvent } from 'core';\r\nimport { DateFormatter } from 'core/FieldFormatter';\r\nimport React from 'react';\r\nimport { Icon } from './Icon';\r\nimport { RowSelector } from './RowSelector';\r\n\r\nexport class ActivityTimeline extends React.Component<{event:RenderEvent,collection:CollectionRef}>{\r\n render(): React.ReactNode {\r\n let items:any[] = [];\r\n\r\n let collection = this.props.collection;\r\n if (!collection) return null;\r\n let rows = collection.rows;\r\n let event = this.props.event;\r\n for(let i = 0; i < rows.length;i++){\r\n let row = rows[i];\r\n items.push(- )\r\n }\r\n return
\r\n {items}\r\n
\r\n
\r\n } \r\n}\r\n\r\n\r\nclass Item extends React.Component<{event:RenderEvent,row:any}>{\r\n render(): React.ReactNode {\r\n let row = this.props.row;\r\n let channels:any[] = [];\r\n if (row.channels != null){\r\n for(let i = 0; i < row.channels.length;i++){\r\n let channel = row.channels[i];\r\n channels.push(
\r\n
{channel.name}
\r\n
{'\\u2022'}
\r\n
{channel.label}
\r\n
)\r\n }\r\n }\r\n var dt = DateFormatter.parse(row.logged_at);\r\n var time = new Date(dt.year,dt.month - 1,dt.day,dt.hour,dt.minute);\r\n let logged_at = DateFormatter.getDurationText(time.getTime());\r\n \r\n let reason;\r\n if (row.reason_label){\r\n reason =
Reason {'\\u2022'} {row.reason_label}
\r\n }\r\n return (
\r\n
\r\n
\r\n
\r\n
\r\n
{logged_at}
\r\n
{row.user_name}
\r\n
\r\n
{row.message}
\r\n {reason}\r\n
\r\n {channels}\r\n
\r\n
\r\n\r\n
)\r\n }\r\n}","import { ActionRef, makeComponent, RenderEvent } from '../core';\r\nimport React from 'react';\r\nimport { FileDropZone } from './FileUpload';\r\n\r\nexport const Image = makeComponent( class extends React.Component<{event:RenderEvent,name?:string,url:string;$id:string,styles?:string,width:any}>{\r\n render(){\r\n let event = this.props.event;\r\n let src = this.props.url;\r\n if (event.designMode && !src){\r\n return this.renderDesignMode();\r\n }\r\n let styles = this.props.event.computeStyles(null,this.props.styles);\r\n let style:React.CSSProperties = {...styles.style,width:this.props.width};\r\n if (event.designMode){\r\n return (
\r\n
\r\n
)\r\n }\r\n return
\r\n }\r\n\r\n renderDesignMode(){\r\n return
\r\n }\r\n\r\n handleDrop = (file:File) => {\r\n let reader = new FileReader();\r\n reader.onload = (e) => {\r\n let filename = file.name;\r\n let content = e.target.result;\r\n let canvas = this.props.event.canvas;\r\n canvas.studioCommandBuffer.setAsset(this.props.$id,content,filename);\r\n canvas.studioCommandBuffer.send();\r\n \r\n }\r\n reader.readAsDataURL(file);\r\n\r\n }\r\n});","import { RenderEvent } from 'core';\r\nimport React from 'react';\r\n\r\nexport class StudioNode extends React.Component<{event:RenderEvent,node_id:string}>{\r\n render(){\r\n return
\r\n {this.props.children}\r\n
\r\n }\r\n\r\n handleClick = (e:React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n\r\n let target = e.target as HTMLElement;\r\n let prop = target.closest('[data-prop-name]');\r\n \r\n }\r\n}\r\n","import React from 'react';\r\n\r\n\r\nexport class InToolbox extends React.Component<{children:any}>{\r\n render(){\r\n return this.props.children || null;\r\n }\r\n}","import { ActionRef, CollectionRef, FieldFormatter, RenderEvent } from 'core';\r\nimport { DateFormatter } from 'core/FieldFormatter';\r\nimport { RenderFunc } from 'core/RenderEvent';\r\nimport React from 'react';\r\n\r\nexport class TaskList extends React.Component<{event:RenderEvent,collection:CollectionRef,onTaskClick:ActionRef}>{\r\n render(): React.ReactNode {\r\n let items:any[] = [];\r\n\r\n let collection = this.props.collection;\r\n if (!collection) return null;\r\n let rows = collection.rows;\r\n let event = this.props.event;\r\n let collectionName = collection.name;\r\n let onTaskClick = this.props.onTaskClick;\r\n for(let i = 0; i < rows.length;i++){\r\n let row = rows[i];\r\n let rowEvent = event.create({[collectionName]:row});\r\n items.push(
- )\r\n }\r\n return
\r\n {items}\r\n
\r\n
\r\n } \r\n}\r\n\r\nclass Item extends React.Component<{event:RenderEvent,row:any,onTaskClick:ActionRef}>{\r\n render(): React.ReactNode {\r\n let row = this.props.row;\r\n let channels:any[] = [];\r\n if (row.channels != null){\r\n for(let i = 0; i < row.channels.length;i++){\r\n let channel = row.channels[i];\r\n channels.push(
\r\n
{channel.name}
\r\n
{'\\u2022'}
\r\n
{channel.label}
\r\n
)\r\n }\r\n }\r\n let duration;\r\n let due_date = row[\"due_date\"];\r\n if (due_date){\r\n let dt = DateFormatter.parse(due_date);\r\n let time = new Date(dt.year,dt.month - 1,dt.day,dt.hour,dt.minute);\r\n duration = DateFormatter.getDurationText(time.getTime());\r\n }\r\n \r\n // /*
/*}\r\n\r\n return (
\r\n
\r\n \r\n
\r\n
\r\n \r\n
Due {duration}
\r\n
{row.user_name}
\r\n
\r\n
{row.message}
\r\n
\r\n {channels}\r\n
\r\n
\r\n\r\n
)\r\n }\r\n\r\n handleClick = (e:React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n if (this.props.onTaskClick){\r\n this.props.onTaskClick.trigger({scope:this.props.event.scope});\r\n }\r\n }\r\n}","export type KeywordSet = string[];\r\nexport interface ISearchProduct {productId:string,keywords:KeywordSet,productLine:string};\r\nexport interface IResult {\r\n prefix?:string;\r\n keywords:string[];\r\n bold:boolean[];\r\n length:number;\r\n hitCount:number;\r\n}\r\n\r\ntype KeywordMap = {[key:string]:IResult};\r\n\r\nexport class KeywordFilter {\r\n products:ISearchProduct[];\r\n\r\n getResults(match:KeywordSet,partial:string):IResult[]{\r\n let filtered:ISearchProduct[];\r\n if (match && match.length){\r\n filtered = this.filterProducts(this.products,match);\r\n }\r\n else {\r\n filtered = this.products;\r\n }\r\n\r\n let results:IResult[] = [];\r\n let map:KeywordMap = {};\r\n let extraMap:KeywordMap = {};\r\n \r\n let matches:ISearchProduct[] = [];\r\n for(let i = 0; i < filtered.length;i++){\r\n let product = filtered[i];\r\n let found = this.addMatches(product.keywords,partial,match,map,extraMap);\r\n if (found){\r\n matches.push(product);\r\n }\r\n }\r\n filtered = matches;\r\n\r\n this.addResultsFromMap(results,match,map,extraMap);\r\n \r\n if (results.length && results.length < 5 && (!match || !match.length)){\r\n let autoKeyword = results[0].keywords[0];\r\n let addOnMatch = [autoKeyword];\r\n filtered = this.filterProducts(filtered,addOnMatch);\r\n let addOnMap = {};\r\n let addOnExtraMap = {};\r\n for(let i = 0; i < filtered.length;i++){\r\n this.addMatches(filtered[i].keywords,\"\",addOnMatch,addOnMap,addOnExtraMap);\r\n }\r\n let newMap = {};\r\n for(let key in addOnMap){\r\n let check = autoKeyword + \"|\" + key;\r\n if (!extraMap[check] && !map[check]){\r\n newMap[key] = addOnMap[key];\r\n }\r\n }\r\n let addOnResults:IResult[] = [];\r\n this.addResultsFromMap(addOnResults,addOnMatch,newMap,addOnExtraMap);\r\n for(let i = 0; i < addOnResults.length; i++){\r\n let result = addOnResults[i];\r\n result.length = 2;\r\n results.push(result);\r\n }\r\n }\r\n\r\n \r\n results.sort((a,b) => {\r\n if (a.length < b.length){\r\n return -1;\r\n }\r\n else if (a.length > b.length){\r\n return 1;\r\n }\r\n if (a.hitCount == b.hitCount){\r\n if (a.keywords[0] < b.keywords[0]) return -1;\r\n if (a.keywords[0 ]> b.keywords[0]) return 1;\r\n return 0;\r\n }\r\n else {\r\n return b.hitCount - a.hitCount;\r\n }\r\n });\r\n \r\n if (results.length > 50){\r\n results = results.slice(0,50);\r\n }\r\n return results;\r\n }\r\n\r\n addResultsFromMap(results:IResult[],match:KeywordSet,map:KeywordMap,extraMap:KeywordMap){\r\n let prefix:string = (match && match.length) ? match.join(' ') + ' ' : \"\";\r\n for(let key in map){\r\n let result = map[key];\r\n result.prefix = prefix;\r\n results.push(result);\r\n }\r\n if (extraMap){\r\n for(let key in extraMap){\r\n let result = extraMap[key];\r\n result.prefix = prefix;\r\n results.push(result);\r\n }\r\n }\r\n }\r\n\r\n filterProducts(products:ISearchProduct[],match:KeywordSet):ISearchProduct[]{\r\n let filtered:ISearchProduct[] = [];\r\n for(let i = 0; i < products.length; i++){\r\n let product = products[i];\r\n if (this.containsAllKeys(product.keywords,match)){\r\n filtered.push(product);\r\n }\r\n }\r\n return filtered;\r\n }\r\n\r\n containsAllKeys(keys:KeywordSet,matches:KeywordSet):boolean {\r\n for(let i = 0 ; i < matches.length;i++){\r\n if (!keys.includes(matches[i])) return false;\r\n }\r\n return true;\r\n }\r\n\r\n addMatches(keys:KeywordSet,partial:string,ignore:string[],map:KeywordMap,extraMap:KeywordMap):boolean{\r\n let found = false;\r\n for(let i = 0; i < keys.length;i++){\r\n let key = keys[i];\r\n if (ignore.includes(key)) continue;\r\n if (key.startsWith(partial)){\r\n let keyBold = partial ? false : true;\r\n this.addToMap(map,[key],[keyBold]);\r\n found = true;\r\n if (extraMap){\r\n let prev = (i > 0) ? keys[i - 1] : undefined;\r\n let next = (i < keys.length - 1) ? keys[i + 1] : undefined;\r\n if (prev && !ignore.includes(prev)){\r\n this.addToMap(extraMap,[prev,key],[true,keyBold])\r\n if (next && !ignore.includes(next)){\r\n this.addToMap(extraMap,[prev,key,next],[true,keyBold,true]);\r\n }\r\n }\r\n if (next && !ignore.includes(next)){\r\n this.addToMap(extraMap,[key,next],[keyBold,true]);\r\n }\r\n }\r\n }\r\n \r\n }\r\n return found;\r\n }\r\n addToMap(map:KeywordMap,keys:string[],bold:boolean[]){\r\n var key = keys.join('|');\r\n let length = keys.length > 1 ? 2 : 1;\r\n if (map[key] === undefined){\r\n map[key] = {keywords:keys,hitCount:1,length,bold};\r\n }\r\n else {\r\n map[key].hitCount++;\r\n }\r\n }\r\n}\r\n\r\nexport class KeywordLexer {\r\n public source:string;\r\n index:number = 0;\r\n keywords:string[] = [];\r\n\r\n static parse(source:string):string[] {\r\n if (!source) return null;\r\n let instance = new KeywordLexer();\r\n instance.source = source.toLowerCase();\r\n return instance.getKeywords();\r\n }\r\n\r\n getKeywords(){\r\n if (!this.source)\r\n this.index = 0;\r\n while(this.index < this.source.length){\r\n let ch = this.source[this.index];\r\n if (ch >='a' && ch <='z'){\r\n this.scanString();\r\n }\r\n else if (ch >='0' && ch<='9'){\r\n this.scanNumber();\r\n }\r\n else {\r\n this.index++;\r\n }\r\n }\r\n return this.keywords;\r\n }\r\n\r\n scanString(){\r\n let s:string = this.source[this.index];\r\n this.index++;\r\n while(this.index < this.source.length){\r\n let ch = this.source[this.index];\r\n if ((ch >= 'a' && ch <= 'z') || (ch >='0' && ch <= '9') || ch == '-' || ch == '/'){\r\n s += ch;\r\n this.index++;\r\n }\r\n else {\r\n this.keywords.push(s);\r\n return;\r\n }\r\n }\r\n this.keywords.push(s);\r\n }\r\n\r\n scanNumber(){\r\n let s:string = this.source[this.index];\r\n this.index++;\r\n while(this.index < this.source.length){\r\n let ch = this.source[this.index];\r\n if ((ch >= 'a' && ch <= 'z') || (ch >='0' && ch <= '9') || ch == '-' ||\r\n ch == '.' || ch == \"'\" || ch == '\"'){\r\n s += ch;\r\n this.index++;\r\n }\r\n else {\r\n this.keywords.push(s);\r\n return;\r\n }\r\n }\r\n this.keywords.push(s);\r\n }\r\n}","import { FieldRef, RenderEvent } from 'core';\r\nimport { IResult, ISearchProduct, KeywordFilter, KeywordLexer } from 'core/search/KeywordFilter';\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { AnchorPoint } from './helpers/AnchorPoint';\r\nimport { Icon } from './Icon';\r\nimport { Popup } from './popups/Popup';\r\n\r\nexport class SearchBox extends React.Component<{event:RenderEvent,field:FieldRef,keywordSet:any}>{\r\n\r\n dirty:boolean;\r\n editValue:string = \"\";\r\n filterValue:string = \"\";\r\n activeIndex:number = -1\r\n results:IResult[];\r\n keywordSet:ISearchProduct[];\r\n containerRef = React.createRef
();\r\n inputRef = React.createRef();\r\n popupOpen:boolean;\r\n \r\n\r\n constructor(props){\r\n super(props);\r\n this.keywordSet = this.props.keywordSet;\r\n }\r\n\r\n componentDidMount(){\r\n let field = this.props.field;\r\n if (this.inputRef.current && field.shouldFocus) {\r\n this.inputRef.current.focus();\r\n this.inputRef.current.select();\r\n }\r\n }\r\n\r\n render(): React.ReactNode {\r\n\r\n\r\n let popupList = null;\r\n let popupPortal;\r\n\r\n \r\n let results = this.results;\r\n let elems = [];\r\n if (results && results.length && this.popupOpen){\r\n for(let i = 0; i < results.length;i++){\r\n let result = results[i];\r\n let isActive = (i == this.activeIndex);\r\n elems.push();\r\n \r\n }\r\n \r\n let rect = this.inputRef.current.getBoundingClientRect();\r\n let popupStyle:React.CSSProperties = {maxHeight:500,width:rect.width,backgroundColor:\"#fff\",overflowY:\"auto\"};\r\n popupList = \r\n {elems}\r\n
\r\n popupPortal = popupList}\r\n anchorPoint={AnchorPoint.BottomAlignLeft}\r\n \r\n />\r\n \r\n\r\n }\r\n\r\n let field = this.props.field;\r\n let clearIcon;\r\n let value = this.dirty ? this.editValue :field.value;\r\n if (value && value.length){\r\n clearIcon = (\r\n \r\n
);\r\n }\r\n let labelElem;\r\n if (field.label){\r\n labelElem = \r\n }\r\n \r\n return \r\n {labelElem}\r\n
\r\n
\r\n {popupPortal}\r\n
\r\n \r\n
\r\n {clearIcon}\r\n
\r\n
\r\n
\r\n \r\n {result.prefix}{content}\r\n
\r\n \r\n