diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/util/SearchUtil.ts | 2 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionSchemaCells.tsx | 55 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionSchemaHeaders.tsx | 53 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionSchemaView.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionTreeView.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/collections/SchemaTable.tsx | 3 | ||||
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/MarqueeView.tsx | 1 | ||||
| -rw-r--r-- | src/client/views/search/SearchBox.tsx | 46 |
8 files changed, 124 insertions, 40 deletions
diff --git a/src/client/util/SearchUtil.ts b/src/client/util/SearchUtil.ts index a66cce6a5..f916ac44a 100644 --- a/src/client/util/SearchUtil.ts +++ b/src/client/util/SearchUtil.ts @@ -83,7 +83,7 @@ export namespace SearchUtil { } } - return { docs: theDocs, numFound: theDocs.length, highlighting, lines: theLines }; + return { docs: theDocs, numFound: result.numFound, highlighting, lines: theLines }; } export async function GetAliasesOfDocument(doc: Doc): Promise<Doc[]>; diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index 49d75e6de..9cdd3b082 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -1,5 +1,5 @@ import React = require("react"); -import { action, observable, trace, computed } from "mobx"; +import { action, observable, trace, computed, runInAction } from "mobx"; import { observer } from "mobx-react"; import { CellInfo } from "react-table"; import "react-table/react-table.css"; @@ -69,10 +69,30 @@ export class CollectionSchemaCell extends React.Component<CellProps> { protected _document = this.props.rowProps.original; protected _dropDisposer?: DragManager.DragDropDisposer; - componentDidMount() { + async componentWillMount() { + + } + + async componentDidMount() { document.addEventListener("keydown", this.onKeyDown); + console.log("mounted"); + console.log(this.type); + if (this.type === "context") { + console.log("mounted2"); + const doc = Doc.GetProto(this.props.rowProps.original); + const aliasdoc = await SearchUtil.GetAliasesOfDocument(doc); + let targetContext = undefined; + if (aliasdoc.length > 0) { + targetContext = Cast(aliasdoc[0].context, Doc) as Doc; + console.log(StrCast(targetContext.title)); + runInAction(() => this.contents = StrCast(targetContext.title)); + } + } + } + @observable contents: string = ""; + componentWillUnmount() { document.removeEventListener("keydown", this.onKeyDown); } @@ -184,6 +204,7 @@ export class CollectionSchemaCell extends React.Component<CellProps> { return <span style={{ color: contents ? "black" : "grey" }}>{contents ? contents?.valueOf() : "undefined"}</span>; } } + type: string = ""; renderCellWithType(type: string | undefined) { const dragRef: React.RefObject<HTMLDivElement> = React.createRef(); @@ -287,8 +308,9 @@ export class CollectionSchemaCell extends React.Component<CellProps> { // </div> // ); const positions = []; + let cfield = ComputedField.WithoutComputed(() => FieldValue(props.Document[props.fieldKey])); + this.type = props.fieldKey; if (StrCast(this.props.Document._searchString).toLowerCase() !== "") { - const cfield = ComputedField.WithoutComputed(() => FieldValue(props.Document[props.fieldKey])); let term = Field.toString(cfield as Field); term = term.toLowerCase(); const search = StrCast(this.props.Document._searchString).toLowerCase(); @@ -312,7 +334,6 @@ export class CollectionSchemaCell extends React.Component<CellProps> { search = true; } - return ( <div className="collectionSchemaView-cellContainer" style={{ cursor: fieldIsDoc ? "grab" : "auto" }} ref={dragRef} onPointerDown={this.onPointerDown} onPointerEnter={onPointerEnter} onPointerLeave={onPointerLeave}> @@ -337,9 +358,14 @@ export class CollectionSchemaCell extends React.Component<CellProps> { if (cfield !== undefined) { // if (typeof(cfield)===RichTextField) const a = cfield as RichTextField; + const b = cfield as DateField; + console.log(b); if (a.Text !== undefined) { return (a.Text); } + else if (b.toString() !== undefined) { + return b.toString(); + } else if (StrCast(cfield)) { return StrCast(cfield); } @@ -397,7 +423,26 @@ export class CollectionSchemaCell extends React.Component<CellProps> { /> : this.returnHighlights(() => { - const cfield = ComputedField.WithoutComputed(() => FieldValue(props.Document[props.fieldKey])); + console.log(props.fieldKey); + let dateCheck: Date | undefined = this.props.rowProps.original[this.props.rowProps.column.id as string] instanceof DateField ? DateCast(this.props.rowProps.original[this.props.rowProps.column.id as string]).date : undefined; + if (dateCheck !== undefined) { + cfield = dateCheck.toLocaleString(); + } + if (props.fieldKey === "context") { + cfield = this.contents; + console.log("this should work"); + } + if (props.fieldKey === "*lastModified") { + if (FieldValue(props.Document["data-lastModified"]) !== undefined) { + const d = ComputedField.WithoutComputed(() => FieldValue(props.Document["data-lastModified"])) as DateField; + cfield = d.date.toLocaleString(); + } + + else if (FieldValue(props.Document["text-lastModified"]) !== undefined) { + const d = ComputedField.WithoutComputed(() => FieldValue(props.Document["text-lastModified"])) as DateField; + cfield = d.date.toLocaleString(); + } + } return Field.toString(cfield as Field); }, positions) } diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx index c2bc7c77c..5c0e6581b 100644 --- a/src/client/views/collections/CollectionSchemaHeaders.tsx +++ b/src/client/views/collections/CollectionSchemaHeaders.tsx @@ -13,6 +13,7 @@ import { SearchBox } from "../search/SearchBox"; import { ColumnType } from "./CollectionSchemaView"; import "./CollectionSchemaView.scss"; import { CollectionView } from "./CollectionView"; +import * as fa from '@fortawesome/free-solid-svg-icons'; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; @@ -308,16 +309,29 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> { @undoBatch onKeyDown = (e: React.KeyboardEvent): void => { if (e.key === "Enter") { - let keyOptions = this._searchTerm === "" ? this.props.possibleKeys : this.props.possibleKeys.filter(key => key.toUpperCase().indexOf(this._searchTerm.toUpperCase()) > -1); - const blockedkeys = ["_scrollTop", "customTitle", "limitHeight", "proto", "x", "y", "_width", "_height", "_autoHeight", "_fontSize", "_fontFamily", "context", "zIndex", "_timeStampOnEnter", "lines", "highlighting", "searchMatch", "creationDate", "isPrototype", "text-annotations", "aliases", "text-lastModified", "text-noTemplate", "layoutKey", "baseProto", "_xMargin", "_yMargin", "layout", "layout_keyValue", "links"]; - 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); + if (this._searchTerm.includes(":")) { + const colpos = this._searchTerm.indexOf(":"); + const temp = this._searchTerm.slice(colpos + 1, this._searchTerm.length); + if (temp === "") { + Doc.setDocFilter(this.props.Document, this._key, temp, undefined); + } + else { + Doc.setDocFilter(this.props.Document, this._key, temp, "match"); + this.props.col.setColor("green"); + } + } + else { + let keyOptions = this._searchTerm === "" ? this.props.possibleKeys : this.props.possibleKeys.filter(key => key.toUpperCase().indexOf(this._searchTerm.toUpperCase()) > -1); + const blockedkeys = ["_scrollTop", "customTitle", "limitHeight", "proto", "x", "y", "_width", "_height", "_autoHeight", "_fontSize", "_fontFamily", "context", "zIndex", "_timeStampOnEnter", "lines", "highlighting", "searchMatch", "creationDate", "isPrototype", "text-annotations", "aliases", "text-lastModified", "text-noTemplate", "layoutKey", "baseProto", "_xMargin", "_yMargin", "layout", "layout_keyValue", "links"]; + 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); + } } } } @@ -408,14 +422,17 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> { this.defaultMenuHeight = 0; return <></>; } + const keyOptions: string[] = []; + const colpos = this._searchTerm.indexOf(":"); + const temp = this._searchTerm.slice(colpos + 1, this._searchTerm.length); if (this.docSafe.length === 0) { this.docSafe = DocListCast(this.props.dataDoc![this.props.fieldKey]); } const docs = this.docSafe; docs.forEach((doc) => { const key = StrCast(doc[this._key]); - if (keyOptions.includes(key) === false) { + if (keyOptions.includes(key) === false && key.includes(temp)) { keyOptions.push(key); } }); @@ -427,6 +444,10 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> { } } + if (filters === undefined || filters.length === 0 || filters.includes(this._key) === false) { + this.props.col.setColor("rgb(241, 239, 235)"); + } + const options = keyOptions.map(key => { //Doc.setDocFilter(this.props.Document!, this._key, key, undefined); let bool = false; @@ -442,6 +463,7 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> { > <input type="checkbox" onChange={(e) => { e.target.checked === true ? Doc.setDocFilter(this.props.Document, this._key, key, "check") : Doc.setDocFilter(this.props.Document, this._key, key, undefined); + e.target.checked === true ? this.props.col.setColor("green") : ""; e.target.checked === true && SearchBox.Instance.filter === true ? Doc.setDocFilter(docs[0], this._key, key, "check") : Doc.setDocFilter(docs[0], this._key, key, undefined); }} checked={bool} ></input> @@ -485,7 +507,12 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> { render() { return ( <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" }} /> + <FontAwesomeIcon onClick={e => { 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" }} /> + + {/* <FontAwesomeIcon icon={fa.faSearchMinus} size="lg" style={{ display: "inline", paddingBottom: "1px", paddingTop: "4px", cursor: "hand" }} onClick={e => { + runInAction(() => { this._isOpen === undefined ? this._isOpen = true : this._isOpen = !this._isOpen }) + }} /> */} + <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} @@ -498,7 +525,7 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> { width: this.props.width, maxWidth: this.props.width, height: "auto", }} onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerOut}> - {this._key === this._searchTerm ? this.renderFilterOptions() : this.renderOptions()} + {this._searchTerm.includes(":") ? this.renderFilterOptions() : this.renderOptions()} </div> </div > </div> diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 892148cd7..1de881f6d 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -631,7 +631,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { style={{ overflow: this.props.overflow === true ? "scroll" : undefined, pointerEvents: !this.props.active() && !SnappingManager.GetIsDragging() ? "none" : undefined, - width: this.props.PanelWidth() || "100%", height: this.props.PanelHeight() || "100%", position: "relative", + width: name === "collectionSchemaView-searchContainer" ? "auto" : this.props.PanelWidth() || "100%", height: this.props.PanelHeight() || "100%", position: "relative", }} > <div className="collectionSchemaView-tableContainer" style={{ backgroundColor: "white", width: `calc(100% - ${this.previewWidth()}px)` }} diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 9e17f1fcb..d096e7d66 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -497,7 +497,7 @@ class TreeView extends React.Component<TreeViewProps> { } } } else this._editMaxWidth = ""; - return <div className="treeViewItem-container" ref={this.createTreeDropTarget} onPointerDown={e => this.props.active() && SelectionManager.DeselectAll()}> + return <div className="treeViewItem-container" ref={this.createTreeDropTarget} onPointerDown={e => this.props.active(true) && SelectionManager.DeselectAll()}> <li className="collection-child"> <div className={`treeViewItem-header` + (this._editMaxWidth ? "-editing" : "")} ref={this._header} style={{ maxWidth: this._editMaxWidth }} onClick={e => { if (this.props.active(true)) { diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx index 8bf5a0475..a2c529a21 100644 --- a/src/client/views/collections/SchemaTable.tsx +++ b/src/client/views/collections/SchemaTable.tsx @@ -320,7 +320,8 @@ export class SchemaTable extends React.Component<SchemaTableProps> { const newSchemaHeaders = oldSchemaHeaders.map(i => typeof i === "string" ? new SchemaHeaderField(i, "#f1efeb") : i); this.props.Document._schemaHeaders = new List<SchemaHeaderField>(newSchemaHeaders); } else if (this.props.Document._schemaHeaders === undefined) { - this.props.Document._schemaHeaders = new List<SchemaHeaderField>([new SchemaHeaderField("title", "#f1efeb")]); + this.props.Document._schemaHeaders = new List<SchemaHeaderField>([new SchemaHeaderField("title", "#f1efeb"), new SchemaHeaderField("author", "#f1efeb"), new SchemaHeaderField("*lastModified", "#f1efeb"), + new SchemaHeaderField("text", "#f1efeb"), new SchemaHeaderField("type", "#f1efeb"), new SchemaHeaderField("context", "#f1efeb")]); } } diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index 54b09ab72..c0b19fcd2 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -356,6 +356,7 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque doc._panX = doc._panY = 0; return doc; })(Doc.MakeCopy(Doc.UserDoc().emptyCollection as Doc, true)); + newCollection.system = undefined; newCollection.isBackground = isBackground; newCollection.backgroundColor = this.props.isAnnotationOverlay ? "#00000015" : isBackground ? "cyan" : undefined; newCollection._width = this.Bounds.width; diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 9cd03d518..770a03cb1 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -170,7 +170,6 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc result[0].searchMatch = undefined; }); - this.props.Document._schemaHeaders = new List<SchemaHeaderField>([]); if (this.currentSelectedCollection !== undefined) { this.currentSelectedCollection.props.Document._searchDocs = new List<Doc>([]); this.currentSelectedCollection = undefined; @@ -625,8 +624,9 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc } this.lockPromise = new Promise(async res => { while (this._results.length <= this._endIndex && (this._numTotalResults === -1 || this._maxSearchIndex < this._numTotalResults)) { - this._curRequest = SearchUtil.Search(query, true, { fq: this.filterQuery, start: this._maxSearchIndex, rows: 10000000, hl: true, "hl.fl": "*", }).then(action(async (res: SearchUtil.DocSearchResult) => { + this._curRequest = SearchUtil.Search(query, true, { fq: this.filterQuery, start: this._maxSearchIndex, rows: this.NumResults, hl: true, "hl.fl": "*", }).then(action(async (res: SearchUtil.DocSearchResult) => { // happens at the beginning + this.realTotalResults = res.numFound; if (res.numFound !== this._numTotalResults && this._numTotalResults === -1) { this._numTotalResults = res.numFound; } @@ -717,6 +717,8 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc this._searchbarOpen = true; } + realTotalResults: number = 0; + @action.bound closeSearch = () => { //this.closeResults(); @@ -742,12 +744,6 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc @action resultsScrolled = (e?: React.UIEvent<HTMLDivElement>) => { if (!this._resultsRef.current) return; - - const scrollY = e ? e.currentTarget.scrollTop : this._resultsRef.current ? this._resultsRef.current.scrollTop : 0; - const itemHght = 53; - //const endIndex = Math.ceil(Math.min(this._numTotalResults - 1, startIndex + (this._resultsRef.current.getBoundingClientRect().height / itemHght))); - const endIndex = 30; - //this._endIndex = endIndex === -1 ? 12 : endIndex; this._endIndex = 30; const headers = new Set<string>(["title", "author", "text", "type", "data", "*lastModified", "context"]); // if ((this._numTotalResults === 0 || this._results.length === 0) && this._openNoResults) { @@ -772,7 +768,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc this._isSorted = Array<undefined>(this._numTotalResults === -1 ? 0 : this._numTotalResults); } - let max = this._pageStart + this._pageCount; + let max = this.NumResults; max > this._results.length ? max = this._results.length : console.log(""); for (let i = this._pageStart; i < max; i++) { //if the index is out of the window then put a placeholder in @@ -801,12 +797,21 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc } } - const schemaheaders: SchemaHeaderField[] = []; this.headerscale = headers.size; - headers.forEach((item) => schemaheaders.push(new SchemaHeaderField(item, "#f1efeb"))); - this.headercount = schemaheaders.length; if (Cast(this.props.Document._docFilters, listSpec("string"), []).length === 0) { - this.props.Document._schemaHeaders = new List<SchemaHeaderField>(schemaheaders); + const oldSchemaHeaders = Cast(this.props.Document._schemaHeaders, listSpec("string"), []); + if (oldSchemaHeaders?.length && typeof oldSchemaHeaders[0] !== "object") { + const newSchemaHeaders = oldSchemaHeaders.map(i => typeof i === "string" ? new SchemaHeaderField(i, "#f1efeb") : i); + headers.forEach(header => { + if (oldSchemaHeaders.includes(header) === false) { + newSchemaHeaders.push(new SchemaHeaderField(header, "#f1efeb")); + } + }); + this.headercount = newSchemaHeaders.length; + this.props.Document._schemaHeaders = new List<SchemaHeaderField>(newSchemaHeaders); + } else if (this.props.Document._schemaHeaders === undefined) { + this.props.Document._schemaHeaders = new List<SchemaHeaderField>([new SchemaHeaderField("title", "#f1efeb")]); + } } if (this._maxSearchIndex >= this._numTotalResults) { this._visibleElements.length = this._results.length; @@ -862,7 +867,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc this.props.Document._searchDoc = true; const cols = Cast(this.props.Document._schemaHeaders, listSpec(SchemaHeaderField), []).length; let length = 0; - cols > 5 ? length = 1076 : length = cols * 205 + 51; + length = cols * 205 + 51; let height = 0; const rows = this.children; height = 31 + 31 * 6; @@ -872,11 +877,16 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc <div style={{ position: "absolute", left: 15 }}>{Doc.CurrentUserEmail}</div> <div style={{ display: "flex", alignItems: "center" }}> <Tooltip title={<div className="dash-tooltip" >drag search results as collection</div>} ><div> - {/* <FontAwesomeIcon onPointerDown={SetupDrag(this.collectionRef, () => StrCast(this.layoutDoc._searchString) ? this.startDragCollection() : undefined)} icon={"search"} size="lg" - style={{ cursor: "hand", color: "black", padding: 1, left: 35, position: "relative" }} /> */} - <FontAwesomeIcon onPointerDown={() => { this.newpage(); }} icon={"search"} size="lg" + <FontAwesomeIcon onPointerDown={SetupDrag(this.collectionRef, () => StrCast(this.layoutDoc._searchString) ? this.startDragCollection() : undefined)} icon={"search"} size="lg" style={{ cursor: "hand", color: "black", padding: 1, left: 35, position: "relative" }} /> </div></Tooltip> + <div style={{ + position: "relative", + left: 245, + zIndex: 9000, + color: "grey", + background: "white", + }}> {`${this._results.length}` + " of " + `${this.realTotalResults}`}</div> <div style={{ cursor: "default", left: 250, position: "relative", }}> <Tooltip title={<div className="dash-tooltip" >only display documents matching search</div>} ><div> <FontAwesomeIcon icon={"filter"} size="lg" @@ -1031,7 +1041,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc removeDocument={returnFalse} PanelHeight={this.open === true ? () => height : () => 0} PanelWidth={this.open === true ? () => length : () => 0} - overflow={cols > 5 || rows > 6 ? true : false} + overflow={length > window.innerWidth || rows > 6 ? true : false} focus={this.selectElement} ScreenToLocalTransform={Transform.Identity} /> |