From b5d1df2ef286a615f9bad1077c33da91ac0416d9 Mon Sep 17 00:00:00 2001
From: Andy Rickert <andrew_rickert@brown.edu>
Date: Thu, 2 Jul 2020 18:45:45 -0400
Subject: filtering in title text boxes of schema, also big css fixes

---
 .../views/collections/CollectionSchemaHeaders.tsx  | 34 +++++++++++++++-------
 .../views/collections/CollectionSchemaView.tsx     |  8 ++++-
 src/client/views/collections/SchemaTable.tsx       | 13 +++++----
 3 files changed, 38 insertions(+), 17 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx
index efff4db98..8ab52744a 100644
--- a/src/client/views/collections/CollectionSchemaHeaders.tsx
+++ b/src/client/views/collections/CollectionSchemaHeaders.tsx
@@ -288,7 +288,7 @@ export interface KeysDropdownProps {
     existingKeys: string[];
     canAddNew: boolean;
     addNew: boolean;
-    onSelect: (oldKey: string, newKey: string, addnew: boolean) => void;
+    onSelect: (oldKey: string, newKey: string, addnew: boolean, filter: string) => void;
     setIsEditing: (isEditing: boolean) => void;
     width?: string;
 }
@@ -306,7 +306,12 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
 
     @action
     onSelect = (key: string): void => {
-        this.props.onSelect(this._key, key, this.props.addNew);
+        console.log("YEE");
+        let newkey = key.slice(0, this._key.length);
+        let filter = key.slice(this._key.length - key.length);
+        console.log(newkey);
+        console.log(filter);
+        this.props.onSelect(this._key, key, this.props.addNew, filter);
         this.setKey(key);
         this._isOpen = false;
         this.props.setIsEditing(false);
@@ -314,6 +319,8 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
 
     @undoBatch
     onKeyDown = (e: React.KeyboardEvent): void => {
+        //if (this._key !==)
+
         if (e.key === "Enter") {
             const keyOptions = this._searchTerm === "" ? this.props.possibleKeys : this.props.possibleKeys.filter(key => key.toUpperCase().indexOf(this._searchTerm.toUpperCase()) > -1);
             if (keyOptions.length) {
@@ -371,13 +378,15 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
         });
 
         // if search term does not already exist as a group type, give option to create new group type
-        if (!exactFound && this._searchTerm !== "" && this.props.canAddNew) {
-            options.push(<div key={""} className="key-option" style={{
-                border: "1px solid lightgray",
-                width: this.props.width, maxWidth: this.props.width, overflowX: "hidden"
-            }}
-                onClick={() => { this.onSelect(this._searchTerm); this.setSearchTerm(""); }}>
-                Create "{this._searchTerm}" key</div>);
+        if (this._key !== this._searchTerm.slice(0, this._key.length)) {
+            if (!exactFound && this._searchTerm !== "" && this.props.canAddNew) {
+                options.push(<div key={""} className="key-option" style={{
+                    border: "1px solid lightgray",
+                    width: this.props.width, maxWidth: this.props.width, overflowX: "hidden"
+                }}
+                    onClick={() => { this.onSelect(this._searchTerm); this.setSearchTerm(""); }}>
+                    Create "{this._searchTerm}" key</div>);
+            }
         }
 
         return options;
@@ -386,7 +395,12 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
     render() {
         return (
             <div className="keys-dropdown" style={{ width: this.props.width, maxWidth: this.props.width, overflowX: "hidden" }}>
-                <input className="keys-search" //style={{ width: this.props.width, maxWidth: "1000" }}
+                {this._key === this._searchTerm.slice(0, this._key.length) ?
+                    <div style={{ position: "absolute", marginLeft: "4px", marginTop: "3", color: "grey", pointerEvents: "none", lineHeight: 1.15 }}>
+                        {this._key}
+                    </div>
+                    : undefined}
+                <input className="keys-search" style={{ width: "100%" }}
                     ref={this._inputRef} type="text" value={this._searchTerm} placeholder="Column key" onKeyDown={this.onKeyDown}
                     onChange={e => this.onChange(e.target.value)}
                     onClick={(e) => {
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 3c42a2f1c..e8c1faff5 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -310,7 +310,8 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
 
     @undoBatch
     @action
-    changeColumns = (oldKey: string, newKey: string, addNew: boolean) => {
+    changeColumns = (oldKey: string, newKey: string, addNew: boolean, filter?: string) => {
+        console.log("COL");
         const columns = this.columns;
         if (columns === undefined) {
             this.columns = new List<SchemaHeaderField>([new SchemaHeaderField(newKey, "f1efeb")]);
@@ -325,6 +326,11 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
                     column.setHeading(newKey);
                     columns[index] = column;
                     this.columns = columns;
+                    if (filter) {
+                        console.log(newKey);
+                        console.log(filter);
+                        Doc.setDocFilter(this.props.Document, newKey, filter, "match");
+                    }
                 }
             }
         }
diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx
index 9e3b4d961..695965cb4 100644
--- a/src/client/views/collections/SchemaTable.tsx
+++ b/src/client/views/collections/SchemaTable.tsx
@@ -220,16 +220,16 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
                         display: "flex"
                     }}>
                     <FontAwesomeIcon icon={icon} size="lg" style={{ display: "inline", paddingLeft: "7px" }} />
-                    <div className="keys-dropdown"
-                        style={{ display: "inline", zIndex: 1000 }}>
-                        {keysDropdown}
-                    </div>
+                    {/* <div className="keys-dropdown"
+                        style={{ display: "inline", zIndex: 1000 }}> */}
+                    {keysDropdown}
+                    {/* </div> */}
                     <div onClick={e => this.changeSorting(col)}
-                        style={{ paddingRight: "6px", display: "inline" }}>
+                        style={{ paddingRight: "6px", display: "inline", zIndex: 1, background: "inherit" }}>
                         <FontAwesomeIcon icon={sortIcon} size="sm" />
                     </div>
                     <div onClick={e => this.props.openHeader(col, e.clientX, e.clientY)}
-                        style={{ float: "right", paddingRight: "6px" }}>
+                        style={{ float: "right", paddingRight: "6px", zIndex: 1, background: "inherit" }}>
                         <FontAwesomeIcon icon={"compass"} size="sm" />
                     </div>
                 </div>;
@@ -466,6 +466,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
             sorted={this.sorted}
             expanded={expanded}
             resized={this.resized}
+            NoDataComponent={() => null}
             onResizedChange={this.props.onResizedChange}
             SubComponent={!hasCollectionChild ? undefined : row => (row.original.type !== "collection") ? (null) :
                 <div className="reactTable-sub"><SchemaTable {...this.props} Document={row.original} dataDoc={undefined} childDocs={undefined} /></div>}
-- 
cgit v1.2.3-70-g09d2