bugfixes for highlighting

4 files changed, 65 insertions, 38 deletions

diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index f5a9716cd..4c2d2f0a9 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -57,7 +57,7 @@ export interface EditableProps {
     highlight?: boolean;
     positions?: number[];
     search?: string;
-    bing?: () => string;
+    bing?: () => string|undefined;
 }
 
 /**
@@ -189,24 +189,35 @@ export class EditableView extends React.Component<EditableProps> {
 
     returnHighlights() {
         let results = [];
-        let length = this.props.search!.length + 1;
-        let contents = "";
-        contents = this.props.bing!();
+        let contents = this.props.bing!();
+
+        if (contents!== undefined){
+        if (this.props.positions!==undefined){
+        let positions = this.props.positions;
+        let length = this.props.search!.length;
         console.log(contents);
+        console.log(this.props.contents?.valueOf());
         // contents = String(this.props.contents.valueOf());
+
         results.push(<span style={{ fontStyle: this.props.fontStyle, fontSize: this.props.fontSize, color: this.props.contents ? "black" : "grey" }}>{contents ? contents.slice(0, this.props.positions![0]) : this.props.placeholder?.valueOf()}</span>);
-        this.props.positions?.forEach((num, cur) => {
+        positions.forEach((num, cur) => {
             results.push(<span style={{ backgroundColor: "#FFFF00", fontStyle: this.props.fontStyle, fontSize: this.props.fontSize, color: this.props.contents ? "black" : "grey" }}>{contents ? contents.slice(num, num + length) : this.props.placeholder?.valueOf()}</span>);
             let end = 0;
-            cur === this.props.positions!.length - 1 ? end = contents.length - 1 : end = this.props.positions![cur + 1];
-            results.push(<span style={{ fontStyle: this.props.fontStyle, fontSize: this.props.fontSize, color: this.props.contents ? "black" : "grey" }}>{contents ? contents.slice(num + length - 1, end) : this.props.placeholder?.valueOf()}</span>);
+            console.log
+            cur === positions.length-1? end = contents.length: end = positions[cur + 1];
+            results.push(<span style={{ fontStyle: this.props.fontStyle, fontSize: this.props.fontSize, color: this.props.contents ? "black" : "grey" }}>{contents ? contents.slice(num + length, end) : this.props.placeholder?.valueOf()}</span>);
         }
         )
-
+    }
         return results;
+}
+else{
+    return <span style={{ fontStyle: this.props.fontStyle, fontSize: this.props.fontSize, color: this.props.contents ? "black" : "grey" }}>{this.props.contents ? this.props.contents?.valueOf() : this.props.placeholder?.valueOf()}</span>;
+}
     }
 
     render() {
+        console.log(this.props.highlight === undefined);
         if (this._editing && this.props.GetValue() !== undefined) {
             return this.props.sizeToContent ?
                 <div style={{ display: "grid", minWidth: 100 }}>
@@ -220,7 +231,7 @@ export class EditableView extends React.Component<EditableProps> {
                     ref={this._ref}
                     style={{ display: this.props.display, minHeight: "20px", height: `${this.props.height ? this.props.height : "auto"}`, maxHeight: `${this.props.maxHeight}` }}
                     onClick={this.onClick} placeholder={this.props.placeholder}>
-                    {this.props.highlight === undefined ? <span style={{ fontStyle: this.props.fontStyle, fontSize: this.props.fontSize, color: this.props.contents ? "black" : "grey" }}>{this.props.contents ? this.props.contents?.valueOf() : this.props.placeholder?.valueOf()}</span>
+                    {this.props.highlight === undefined || this.props.positions===undefined || this.props.bing===undefined? <span style={{ fontStyle: this.props.fontStyle, fontSize: this.props.fontSize, color: this.props.contents ? "black" : "grey" }}>{this.props.contents ? this.props.contents?.valueOf() : this.props.placeholder?.valueOf()}</span>
                         : this.returnHighlights()}
                 </div>
             );
diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx
index 6fc0026e5..b1c3705ca 100644
--- a/src/client/views/collections/CollectionSchemaCells.tsx
+++ b/src/client/views/collections/CollectionSchemaCells.tsx
@@ -248,28 +248,36 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
         if (StrCast(this.props.Document._searchString) !== "") {
             console.log(StrCast(this.props.Document._searchString));
             const cfield = ComputedField.WithoutComputed(() => FieldValue(props.Document[props.fieldKey]));
-            // if (cfield[Text]!==undefined){
-
-            // }
-            console.log(cfield?.valueOf());
-            let term = StrCast(cfield);
-            console.log(term);
+            let term = "";
+            if (cfield!==undefined){
+                if (cfield.Text!==undefined){
+                    term = cfield.Text;
+                }
+                else if (StrCast(cfield)){
+                    term= StrCast(cfield);
+                }
+                else {
+                    term = String(NumCast(cfield));
+                }
+            }
             let search = StrCast(this.props.Document._searchString)
             let start = term.indexOf(search) as number;
+            console.log(start);
             let tally = 0;
+            if (start!==-1){
             positions.push(start);
+            }
             while (start < contents.length && start !== -1) {
                 term = term.slice(start + search.length + 1);
                 tally += start + search.length + 1;
                 start = term.indexOf(search);
                 positions.push(tally + start);
             }
-            console.log(positions);
             if (positions.length > 1) {
                 positions.pop();
             }
         }
-
+        console.log(positions.length);
         return (
             <div className="collectionSchemaView-cellContainer" style={{ cursor: fieldIsDoc ? "grab" : "auto" }} ref={dragRef} onPointerDown={this.onPointerDown} onPointerEnter={onPointerEnter} onPointerLeave={onPointerLeave}>
                 <div className={className} ref={this._focusRef} onPointerDown={onItemDown} tabIndex={-1}>
@@ -287,23 +295,29 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
                             maxHeight={Number(MAX_ROW_HEIGHT)}
                             placeholder={"enter value"}
                             bing={() => {
-                                console.log("FLAMINGO");
-                                if (type === "number" && (contents === 0 || contents === "0")) {
-                                    return "0";
-                                } else {
+                                // if (type === "number" && (contents === 0 || contents === "0")) {
+                                //     return "0";
+                                // } else {
                                     const cfield = ComputedField.WithoutComputed(() => FieldValue(props.Document[props.fieldKey]));
                                     console.log(cfield);
-                                    // if (type === "number") {
-                                    return StrCast(cfield);
-                                    // }
-                                    // return cfield;
-                                    // const cscript = cfield instanceof ComputedField ? cfield.script.originalScript : undefined;
-                                    // const cfinalScript = cscript?.split("return")[cscript.split("return").length - 1];
-                                    // const val = cscript !== undefined ? (cfinalScript?.endsWith(";") ? `:=${cfinalScript?.substring(0, cfinalScript.length - 2)}` : cfinalScript) :
-                                    //     Field.IsField(cfield) ? Field.toScriptString(cfield) : "";
-                                    // return val;
-
+                                    if (cfield!==undefined){
+                                    if (cfield.Text!==undefined){
+                                        console.log
+                                        return(cfield.Text)
+                                    }
+                                    else if (StrCast(cfield)){
+                                        console.log("strcast");
+                                        return StrCast(cfield);
+                                    }
+                                    else {
+                                        console.log("numcast");
+                                        return String(NumCast(cfield));
+                                    }
                                 }
+                                    // console.log(cfield.Text);
+                                    // console.log(StrCast(cfield));
+                                    // return StrCast(cfield);
+                                // }
 
                             }}
                             GetValue={() => {
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index cd64d71ff..4d057f782 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -19,8 +19,7 @@
     display: flex;
     justify-content: flex-end;
     align-items: center;
-    padding-left: 2px;
-
+    background-color: black;
     .searchBox-barChild {
 
         &.searchBox-collection {
@@ -30,17 +29,20 @@
         }
 
         &.searchBox-input {
+            margin:5px;
+            border-radius:20px;
+            border:black;    
             display: block;
             width: 130px;
             -webkit-transition: width 0.4s;
             transition: width 0.4s;
             align-self: stretch;
-
+            outline:none;
         }
 
         .searchBox-input:focus {
             width: 500px;
-            outline: 3px solid lightblue;
+            outline:none;
         }
 
         &.searchBox-filter {
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index f120a408e..884aa6a68 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -1104,13 +1104,13 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         return (
             <div style={{ pointerEvents: "all" }} className="searchBox-container">
                 <div className="searchBox-bar">
-                    <span className="searchBox-barChild searchBox-collection" onPointerDown={SetupDrag(this.collectionRef, () => StrCast(this.layoutDoc._searchString) ? this.startDragCollection() : undefined)} ref={this.collectionRef} title="Drag Results as Collection">
+                    {/* <span className="searchBox-barChild searchBox-collection" onPointerDown={SetupDrag(this.collectionRef, () => StrCast(this.layoutDoc._searchString) ? this.startDragCollection() : undefined)} ref={this.collectionRef} title="Drag Results as Collection">
                         <FontAwesomeIcon icon="object-group" size="lg" />
-                    </span>
+                    </span> */}
                     <input value={StrCast(this.layoutDoc._searchString)} onChange={this.onChange} type="text" placeholder="Search..." id="search-input" ref={this.inputRef}
                         className="searchBox-barChild searchBox-input" onPointerDown={this.openSearch} onKeyPress={this.enter} onFocus={this.openSearch}
                         style={{ width: this._searchbarOpen ? "500px" : "100px" }} />
-                    <button className="searchBox-barChild searchBox-filter" style={{ transform: "none" }} title="Advanced Filtering Options" onClick={() => this.handleFilterChange()}><FontAwesomeIcon icon="ellipsis-v" color="white" /></button>
+                    {/* <button className="searchBox-barChild searchBox-filter" style={{ transform: "none" }} title="Advanced Filtering Options" onClick={() => this.handleFilterChange()}><FontAwesomeIcon icon="ellipsis-v" color="white" /></button> */}
                 </div>
                 <div id={`filterhead${this.props.Document[Id]}`} className="filter-form" style={this._filterOpen && this._numTotalResults > 0 ? { overflow: "visible" } : { overflow: "hidden" }}>
                     <div id={`filterhead2${this.props.Document[Id]}`} className="filter-header"  >