diff options
| -rw-r--r-- | src/client/views/collections/CollectionSchemaHeaders.tsx | 251 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionSchemaView.tsx | 16 | ||||
| -rw-r--r-- | src/client/views/collections/SchemaTable.tsx | 28 | ||||
| -rw-r--r-- | src/client/views/search/SearchBox.tsx | 2 |
4 files changed, 51 insertions, 246 deletions
diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx index 8cc91b3da..c1c4eb628 100644 --- a/src/client/views/collections/CollectionSchemaHeaders.tsx +++ b/src/client/views/collections/CollectionSchemaHeaders.tsx @@ -1,5 +1,5 @@ import React = require("react"); -import { action, observable, computed } from "mobx"; +import { action, observable, computed, runInAction } from "mobx"; import { observer } from "mobx-react"; import "./CollectionSchemaView.scss"; import { faPlus, faFont, faHashtag, faAlignJustify, faCheckSquare, faToggleOn, faSortAmountDown, faSortAmountUp, faTimes, faImage, faListUl, faCalendar } from '@fortawesome/free-solid-svg-icons'; @@ -253,18 +253,6 @@ export class CollectionSchemaColumnMenu extends React.Component<ColumnMenuProps> renderContent = () => { return ( <div className="collectionSchema-header-menuOptions"> - <div className="collectionSchema-headerMenu-group"> - <label>Key:</label> - <KeysDropdown - keyValue={this.props.columnField.heading} - possibleKeys={this.props.possibleKeys} - existingKeys={this.props.existingKeys} - canAddNew={true} - addNew={this.props.addNew} - onSelect={this.props.onSelect} - setIsEditing={this.props.setIsEditing} - /> - </div> {this.props.onlyShowOptions ? <></> : <> {this.renderTypes()} @@ -301,12 +289,15 @@ export interface KeysDropdownProps { setIsEditing: (isEditing: boolean) => void; width?: string; docs?: Doc[]; - Document?: Doc; - dataDoc?: Doc; - fieldKey?: string; - ContainingCollectionDoc?: Doc; - ContainingCollectionView?: CollectionView; + Document: Doc; + dataDoc: Doc; + fieldKey: string; + ContainingCollectionDoc: Doc; + ContainingCollectionView: CollectionView; active?: (outsideReaction?: boolean) => boolean; + openHeader: (column: any, screenx: number, screeny: number) => void; + col: SchemaHeaderField; + icon: IconProp; } @observer export class KeysDropdown extends React.Component<KeysDropdownProps> { @@ -322,28 +313,10 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> { @action onSelect = (key: string): void => { - if (this._searchTerm.includes(":")) { - const colpos = this._searchTerm.indexOf(":"); - const filter = this._searchTerm.slice(colpos + 1, this._searchTerm.length); - //const filter = key.slice(this._key.length - key.length); - this.props.onSelect(this._key, this._key, this.props.addNew, filter); - } - else { - this.props.onSelect(this._key, key, this.props.addNew); - this.setKey(key); - this._isOpen = false; - this.props.setIsEditing(false); - } - } - - @action - onSelectValue = (key: string): void => { - const colpos = this._searchTerm.indexOf(":"); - this.onSelect(key); - this._searchTerm = this._searchTerm.slice(0, colpos + 1) + key; + this.props.onSelect(this._key, key, this.props.addNew); + this.setKey(key); this._isOpen = false; - this.props.onSelect(this._key, this._key, this.props.addNew, key); - + this.props.setIsEditing(false); } @undoBatch @@ -354,8 +327,10 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> { keyOptions = keyOptions.filter(n => !blockedkeys.includes(n)); if (keyOptions.length) { this.onSelect(keyOptions[0]); + console.log("case1"); } else if (this._searchTerm !== "" && this.props.canAddNew) { this.setSearchTerm(this._searchTerm || this._key); + console.log("case2"); this.onSelect(this._searchTerm); } } @@ -412,7 +387,10 @@ 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 + console.log("Start here"); + console.log(this._key, this._searchTerm.slice(0, this._key.length)); if (this._key !== this._searchTerm.slice(0, this._key.length)) { + console.log("little further"); 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", background: "white", @@ -438,17 +416,17 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> { } @action renderFilterOptions = (): JSX.Element[] | JSX.Element => { + console.log("we here"); if (!this._isOpen) { this.defaultMenuHeight = 0; return <></>; } let keyOptions: string[] = []; - const colpos = this._searchTerm.indexOf(":"); - const temp = this._searchTerm.slice(colpos + 1, this._searchTerm.length); let docs = DocListCast(this.props.dataDoc![this.props.fieldKey!]); + docs.forEach((doc) => { const key = StrCast(doc[this._key]); - if (keyOptions.includes(key) === false && key.includes(temp)) { + if (keyOptions.includes(key) === false) { keyOptions.push(key); } }); @@ -488,107 +466,12 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> { } } - return options; } - - // @action - // renderFilterOptions = (): JSX.Element[] | JSX.Element => { - // this.facetClick(this._key); - // return <div> - // {this.filterView} - // </div> - // } @observable defaultMenuHeight = 0; - facetClick = (facetHeader: string) => { - facetHeader = this._key; - let newFacet: Opt<Doc>; - if (this.props.Document !== undefined) { - const facetCollection = this.props.Document; - // const found = DocListCast(facetCollection[this.props.fieldKey + "-filter"]).findIndex(doc => doc.title === facetHeader); - // if (found !== -1) { - // console.log("found not n-1"); - // (facetCollection[this.props.fieldKey + "-filter"] as List<Doc>).splice(found, 1); - // const docFilter = Cast(this.props.Document._docFilters, listSpec("string")); - // if (docFilter) { - // let index: number; - // while ((index = docFilter.findIndex(item => item === facetHeader)) !== -1) { - // docFilter.splice(index, 3); - // } - // } - // const docRangeFilters = Cast(this.props.Document._docRangeFilters, listSpec("string")); - // if (docRangeFilters) { - // let index: number; - // while ((index = docRangeFilters.findIndex(item => item === facetHeader)) !== -1) { - // docRangeFilters.splice(index, 3); - // } - // } - // } - - - - console.log("found is n-1"); - const allCollectionDocs = DocListCast(this.props.dataDoc![this.props.fieldKey!]); - var rtfields = 0; - const facetValues = Array.from(allCollectionDocs.reduce((set, child) => { - const field = child[facetHeader] as Field; - const fieldStr = Field.toString(field); - if (field instanceof RichTextField || (typeof (field) === "string" && fieldStr.split(" ").length > 2)) rtfields++; - return set.add(fieldStr); - }, new Set<string>())); - - let nonNumbers = 0; - let minVal = Number.MAX_VALUE, maxVal = -Number.MAX_VALUE; - facetValues.map(val => { - const num = Number(val); - if (Number.isNaN(num)) { - nonNumbers++; - } else { - minVal = Math.min(num, minVal); - maxVal = Math.max(num, maxVal); - } - }); - if (facetHeader === "text" || rtfields / allCollectionDocs.length > 0.1) { - console.log("Case1"); - newFacet = Docs.Create.TextDocument("", { _width: 100, _height: 25, treeViewExpandedView: "layout", title: facetHeader, treeViewOpen: true, forceActive: true, ignoreClick: true }); - Doc.GetProto(newFacet).type = DocumentType.COL; // forces item to show an open/close button instead ofa checkbox - newFacet.target = this.props.Document; - newFacet._textBoxPadding = 4; - const scriptText = `setDocFilter(this.target, "${facetHeader}", text, "match")`; - newFacet.onTextChanged = ScriptField.MakeScript(scriptText, { this: Doc.name, text: "string" }); - } else if (nonNumbers / facetValues.length < .1) { - console.log("Case2"); - newFacet = Docs.Create.SliderDocument({ title: facetHeader, treeViewExpandedView: "layout", treeViewOpen: true }); - const newFacetField = Doc.LayoutFieldKey(newFacet); - const ranged = Doc.readDocRangeFilter(this.props.Document, facetHeader); - Doc.GetProto(newFacet).type = DocumentType.COL; // forces item to show an open/close button instead ofa checkbox - const extendedMinVal = minVal - Math.min(1, Math.abs(maxVal - minVal) * .05); - const extendedMaxVal = maxVal + Math.min(1, Math.abs(maxVal - minVal) * .05); - newFacet[newFacetField + "-min"] = ranged === undefined ? extendedMinVal : ranged[0]; - newFacet[newFacetField + "-max"] = ranged === undefined ? extendedMaxVal : ranged[1]; - Doc.GetProto(newFacet)[newFacetField + "-minThumb"] = extendedMinVal; - Doc.GetProto(newFacet)[newFacetField + "-maxThumb"] = extendedMaxVal; - newFacet.target = this.props.Document; - const scriptText = `setDocFilterRange(this.target, "${facetHeader}", range)`; - newFacet.onThumbChanged = ScriptField.MakeScript(scriptText, { this: Doc.name, range: "number" }); - Doc.AddDocToList(facetCollection, this.props.fieldKey + "-filter", newFacet); - } else { - console.log("Case3"); - newFacet = new Doc(); - newFacet.title = facetHeader; - newFacet.treeViewOpen = true; - newFacet.type = DocumentType.COL; - const capturedVariables = { layoutDoc: this.props.Document, dataDoc: this.props.dataDoc! }; - this.props.Document.data = ComputedField.MakeFunction(`readFacetData(layoutDoc, dataDoc, "${this.props.fieldKey}", "${facetHeader}")`, {}, capturedVariables); - // this.props.Document.data - } - //newFacet && Doc.AddDocToList(facetCollection, this.props.fieldKey + "-filter", newFacet); - } - } - get ignoreFields() { return ["_docFilters", "_docRangeFilters"]; } @@ -600,82 +483,28 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> { } filterBackground = () => "rgba(105, 105, 105, 0.432)"; - - // @computed get filterView() { - // TraceMobx(); - // if (this.props.Document !== undefined) { - // //const facetCollection = this.props.Document; - // // const flyout = ( - // // <div className="collectionTimeView-flyout" style={{ width: `${this.facetWidth()}`, height: this.props.PanelHeight() - 30 }} onWheel={e => e.stopPropagation()}> - // // {this._allFacets.map(facet => <label className="collectionTimeView-flyout-item" key={`${facet}`} onClick={e => this.facetClick(facet)}> - // // <input type="checkbox" onChange={e => { }} checked={DocListCast(this.props.Document[this.props.fieldKey + "-filter"]).some(d => d.title === facet)} /> - // // <span className="checkmark" /> - // // {facet} - // // </label>)} - // // </div> - // // ); - // return <div className="altcollectionTimeView-treeView"> - // <div className="altcollectionTimeView-tree" key="tree"> - // <CollectionTreeView - // PanelPosition={""} - // Document={this.props.Document} - // DataDoc={this.props.Document} - // fieldKey={this.props.fieldKey!} - // CollectionView={undefined} - // docFilters={returnEmptyFilter} - // ContainingCollectionDoc={this.props.ContainingCollectionDoc!} - // ContainingCollectionView={this.props.ContainingCollectionView!} - // PanelWidth={() => 200} - // PanelHeight={() => 200} - // NativeHeight={returnZero} - // NativeWidth={returnZero} - // LibraryPath={emptyPath} - // rootSelected={returnFalse} - // renderDepth={1} - // dropAction={undefined} - // ScreenToLocalTransform={Transform.Identity} - // addDocTab={returnFalse} - // pinToPres={returnFalse} - // isSelected={returnFalse} - // select={returnFalse} - // bringToFront={emptyFunction} - // active={this.props.active!} - // whenActiveChanged={returnFalse} - // treeViewHideTitle={true} - // ContentScaling={returnOne} - // focus={returnFalse} - // treeViewHideHeaderFields={true} - // onCheckedClick={this.scriptField} - // ignoreFields={this.ignoreFields} - // annotationsKey={""} - // dontRegisterView={true} - // backgroundColor={this.filterBackground} - // moveDocument={returnFalse} - // removeDocument={returnFalse} - // addDocument={returnFalse} /> - // </div> - // </div>; - // } - // } - + @observable filterOpen: boolean | undefined = undefined; render() { + console.log(this._isOpen, this._key, this._searchTerm); return ( - <div className="keys-dropdown" style={{ zIndex: 10, width: this.props.width, maxWidth: this.props.width }}> - <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) => { - //this._inputRef.current!.select(); - e.stopPropagation(); - }} onFocus={this.onFocus} onBlur={this.onBlur}></input> - <div className="keys-options-wrapper" style={{ - width: this.props.width, maxWidth: this.props.width, height: "auto", - }} - onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerOut}> - {this._searchTerm.includes(":") ? - this.renderFilterOptions() : this.renderOptions()} - </div> - </div > + <div style={{ display: "flex" }}> + <FontAwesomeIcon onClick={e => { this.props.Document._searchDoc ? runInAction(() => { this._isOpen === undefined ? this._isOpen = true : this._isOpen = !this._isOpen }) : this.props.openHeader(this.props.col, e.clientX, e.clientY) }} icon={this.props.icon} size="lg" style={{ display: "inline", paddingBottom: "1px", paddingTop: "4px", cursor: "hand" }} /> + <div className="keys-dropdown" style={{ zIndex: 10, width: this.props.width, maxWidth: this.props.width }}> + <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) => { + //this._inputRef.current!.select(); + e.stopPropagation(); + }} onFocus={this.onFocus} onBlur={this.onBlur}></input> + <div className="keys-options-wrapper" style={{ + width: this.props.width, maxWidth: this.props.width, height: "auto", + }} + onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerOut}> + {this._key === this._searchTerm ? this.renderFilterOptions() : this.renderOptions()} + </div> + </div > + </div> ); } } diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 3f879b489..ef7b1c4f7 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -366,17 +366,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { @action closeHeader = () => { this._headerOpen = false; } - renderKeysDropDown = (col: any) => { - return <KeysDropdown - keyValue={col.heading} - possibleKeys={this.possibleKeys} - existingKeys={this.columns.map(c => c.heading)} - canAddNew={true} - addNew={false} - onSelect={this.changeColumns} - setIsEditing={this.setHeaderIsEditing} - />; - } + @undoBatch @action @@ -415,10 +405,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { @computed get renderMenuContent() { TraceMobx(); return <div className="collectionSchema-header-menuOptions"> - <div className="collectionSchema-headerMenu-group"> - <label>Key:</label> - {this.renderKeysDropDown(this._col)} - </div> {this.renderTypes(this._col)} {this.renderSorting(this._col)} {this.renderColors(this._col)} diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx index d8756aae3..4fb05733a 100644 --- a/src/client/views/collections/SchemaTable.tsx +++ b/src/client/views/collections/SchemaTable.tsx @@ -180,6 +180,11 @@ export class SchemaTable extends React.Component<SchemaTableProps> { this.props.active const cols = this.props.columns.map(col => { + const icon: IconProp = this.getColumnType(col) === ColumnType.Number ? "hashtag" : this.getColumnType(col) === ColumnType.String ? "font" : + this.getColumnType(col) === ColumnType.Boolean ? "check-square" : this.getColumnType(col) === ColumnType.Doc ? "file" : + this.getColumnType(col) === ColumnType.Image ? "image" : this.getColumnType(col) === ColumnType.List ? "list-ul" : + this.getColumnType(col) === ColumnType.Date ? "calendar" : "align-justify"; + const keysDropdown = <KeysDropdown keyValue={col.heading} possibleKeys={possibleKeys} @@ -195,26 +200,14 @@ export class SchemaTable extends React.Component<SchemaTableProps> { ContainingCollectionDoc={this.props.ContainingCollectionDoc} ContainingCollectionView={this.props.ContainingCollectionView} active={this.props.active} - - + openHeader={this.props.openHeader} + icon={icon} + col={col} // try commenting this out width={"100%"} />; - const icon: IconProp = this.getColumnType(col) === ColumnType.Number ? "hashtag" : this.getColumnType(col) === ColumnType.String ? "font" : - this.getColumnType(col) === ColumnType.Boolean ? "check-square" : this.getColumnType(col) === ColumnType.Doc ? "file" : - this.getColumnType(col) === ColumnType.Image ? "image" : this.getColumnType(col) === ColumnType.List ? "list-ul" : - this.getColumnType(col) === ColumnType.Date ? "calendar" : "align-justify"; - const headerText = this._showTitleDropdown ? keysDropdown : <div - onClick={this.changeTitleMode} - style={{ - background: col.color, padding: "2px", - letterSpacing: "2px", - textTransform: "uppercase", - display: "flex" - }}> - {col.heading}</div>; const sortIcon = col.desc === undefined ? "caret-right" : col.desc === true ? "caret-down" : "caret-up"; @@ -226,11 +219,8 @@ export class SchemaTable extends React.Component<SchemaTableProps> { background: col.color, padding: "2px", display: "flex", cursor: "default", height: "100%", }}> - <FontAwesomeIcon onClick={e => this.props.openHeader(col, e.clientX, e.clientY)} icon={icon} size="lg" style={{ display: "inline", paddingBottom: "1px", paddingTop: "4px", cursor: "hand" }} /> - {/* <div className="keys-dropdown" - style={{ display: "inline", zIndex: 1000 }}> */} + {/* <FontAwesomeIcon onClick={e => this.props.openHeader(col, e.clientX, e.clientY)} icon={icon} size="lg" style={{ display: "inline", paddingBottom: "1px", paddingTop: "4px", cursor: "hand" }} /> */} {keysDropdown} - {/* </div> */} <div onClick={e => this.changeSorting(col)} style={{ width: 21, padding: 1, display: "inline", zIndex: 1, background: "inherit", cursor: "hand" }}> <FontAwesomeIcon icon={sortIcon} size="lg" /> diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 4a14b222c..da298e54c 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -533,7 +533,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc getDataStatus() { return this._deletedDocsStatus; } - private NumResults = 25; + private NumResults = 50; private lockPromise?: Promise<void>; getResults = async (query: string) => { console.log("Get"); |