From 1848c78f889470d6c558f709efe1b521402b2793 Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Wed, 29 Apr 2020 20:56:31 -0700 Subject: search results now display as search item docs in stacking view --- src/client/views/search/SearchBox.tsx | 39 +++++++------- src/client/views/search/SearchItem.tsx | 94 +++++++++++++++++++--------------- 2 files changed, 72 insertions(+), 61 deletions(-) (limited to 'src') diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index a4f1b7d34..e784580e5 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -79,8 +79,9 @@ const SearchBoxDocument = makeInterface(documentSchema, searchSchema); @observer export class SearchBox extends ViewBoxBaseComponent(SearchBoxDocument) { - private get _searchString() { return this.props.searchQuery; } - private set _searchString(value) { this.props.setSearchQuery(value); } + // private get _searchString() { return this.rootDoc.searchQuery; } + // private set _searchString(value) { this.rootDoc.setSearchQuery(value); } + @observable private _searchString: string =""; @observable private _resultsOpen: boolean = false; @observable private _searchbarOpen: boolean = false; @observable private _results: [Doc, string[], string[]][] = []; @@ -340,6 +341,7 @@ export class SearchBox extends ViewBoxBaseComponent { + console.log(this._searchString); this.dataDoc[this.fieldKey] = new List([]); const query = this._searchString; this.getFinalQuery(query); @@ -368,15 +370,16 @@ export class SearchBox extends ViewBoxBaseComponent `({!join from=id to=proto_i}type_t:"${type}" AND NOT type_t:*) OR type_t:"${type}"`).join(" ")})`; - // fq: type_t:collection OR {!join from=id to=proto_i}type_t:collection q:text_t:hello - const query = [baseExpr, includeDeleted, includeIcons, typeExpr].join(" AND ").replace(/AND $/, ""); - return query; - } + // const types = this.filterTypes; + // const baseExpr = "NOT baseProto_b:true"; + // const includeDeleted = this.getDataStatus() ? "" : " NOT deleted_b:true"; + // const includeIcons = this.getDataStatus() ? "" : " NOT type_t:fonticonbox"; + // const typeExpr = !types ? "" : ` (${types.map(type => `({!join from=id to=proto_i}type_t:"${type}" AND NOT type_t:*) OR type_t:"${type}"`).join(" ")})`; + // // fq: type_t:collection OR {!join from=id to=proto_i}type_t:collection q:text_t:hello + // const query = [baseExpr, includeDeleted, includeIcons, typeExpr].join(" AND ").replace(/AND $/, ""); + // return query; + return ""; + } getDataStatus() { return this._deletedDocsStatus; } @@ -402,7 +405,8 @@ export class SearchBox extends ViewBoxBaseComponent (await Cast(doc.extendsDoc, Doc)) || doc)); const highlights: typeof res.highlighting = {}; docs.forEach((doc, index) => highlights[doc[Id]] = highlightList[index]); - const filteredDocs = this.filterDocsByType(docs); + const filteredDocs = docs; + //this.filterDocsByType(docs); runInAction(() => { //this._results.push(...filteredDocs); filteredDocs.forEach(doc => { @@ -556,10 +560,8 @@ export class SearchBox extends ViewBoxBaseComponent(highlights); this._visibleElements[i] = ; - debugger; - Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]) - //this.fieldkey + dash search results - //ask about document parmater in collection view + result[0].targetDoc=result[0]; + Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]); this._isSearch[i] = "search"; } } @@ -572,8 +574,7 @@ export class SearchBox extends ViewBoxBaseComponent(highlights); this._visibleElements[i] = ; - debugger; - + result[0].targetDoc=result[0]; Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]) this._isSearch[i] = "search"; } @@ -963,7 +964,7 @@ export class SearchBox extends ViewBoxBaseComponent - {this._visibleElements} + {this._visibleElements.length} diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx index f25464eb0..fa94edb1e 100644 --- a/src/client/views/search/SearchItem.tsx +++ b/src/client/views/search/SearchItem.tsx @@ -4,7 +4,7 @@ import { faCaretUp, faChartBar, faFile, faFilePdf, faFilm, faFingerprint, faGlob import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { action, computed, observable, runInAction } from "mobx"; import { observer } from "mobx-react"; -import { Doc } from "../../../new_fields/Doc"; +import { Doc, DocCastAsync } from "../../../new_fields/Doc"; import { Id } from "../../../new_fields/FieldSymbols"; import { Cast, NumCast, StrCast } from "../../../new_fields/Types"; import { emptyFunction, emptyPath, returnFalse, Utils, returnTrue } from "../../../Utils"; @@ -24,7 +24,7 @@ import "./SearchItem.scss"; import "./SelectorContextMenu.scss"; import { FieldViewProps, FieldView } from "../nodes/FieldView"; import { ViewBoxBaseComponent } from "../DocComponent"; -import { makeInterface } from "../../../new_fields/Schema"; +import { makeInterface, createSchema } from "../../../new_fields/Schema"; import { documentSchema } from "../../../new_fields/documentSchemas"; export interface SearchItemProps { @@ -128,8 +128,15 @@ export class LinkContextMenu extends React.Component { type SearchSchema = makeInterface<[typeof documentSchema]>; + +export const SearchSchema = createSchema({ + targetDoc: Doc, +}); + const SearchDocument = makeInterface(documentSchema); + + @observer export class SearchItem extends ViewBoxBaseComponent(SearchDocument) { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(SearchItem, fieldKey); } @@ -138,23 +145,23 @@ export class SearchItem extends ViewBoxBaseComponent { // I dont think this is the best functionality because clicking the name of the collection does that. Change it back if you'd like - DocumentManager.Instance.jumpToDocument(this.props.doc!, false); + DocumentManager.Instance.jumpToDocument(this.targetDoc, false); } @observable _useIcons = true; @observable _displayDim = 50; componentDidMount() { - Doc.SetSearchQuery(StrCast(this.props.doc!.query)); - this.props.doc!.searchMatch = true; + Doc.SetSearchQuery(StrCast(this.targetDoc.query)); + this.targetDoc.searchMatch = true; } componentWillUnmount() { - this.props.doc!.searchMatch = undefined; + this.targetDoc.searchMatch = undefined; } //@computed @action public DocumentIcon() { - const layoutresult = StrCast(this.props.doc!.type); + const layoutresult = StrCast(this.targetDoc.type); if (!this._useIcons) { const returnXDimension = () => this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE); const returnYDimension = () => this._displayDim; @@ -165,10 +172,10 @@ export class SearchItem extends ViewBoxBaseComponent this._displayDim = this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE))} > { e.preventDefault(); e.button === 0 && SearchBox.Instance.openSearch(e); - this.props.doc!.searchMatch = false; - setTimeout(() => this.props.doc!.searchMatch = true, 0); + this.targetDoc!.searchMatch = false; + setTimeout(() => this.targetDoc!.searchMatch = true, 0); } highlightDoc = (e: React.PointerEvent) => { - if (this.props.doc!.type === DocumentType.LINK) { - if (this.props.doc!.anchor1 && this.props.doc!.anchor2) { + // if (this.targetDoc!.type === DocumentType.LINK) { + // if (this.targetDoc!.anchor1 && this.targetDoc!.anchor2) { - const doc1 = Cast(this.props.doc!.anchor1, Doc, null); - const doc2 = Cast(this.props.doc!.anchor2, Doc, null); - Doc.BrushDoc(doc1); - Doc.BrushDoc(doc2); - } - } else { - Doc.BrushDoc(this.props.doc!); - } + // const doc1 = Cast(this.targetDoc!.anchor1, Doc, null); + // const doc2 = Cast(this.targetDoc!.anchor2, Doc, null); + // Doc.BrushDoc(doc1); + // Doc.BrushDoc(doc2); + // } + // } else { + // Doc.BrushDoc(this.targetDoc!); + // } e.stopPropagation(); } unHighlightDoc = (e: React.PointerEvent) => { - if (this.props.doc!.type === DocumentType.LINK) { - if (this.props.doc!.anchor1 && this.props.doc!.anchor2) { + // if (this.targetDoc!.type === DocumentType.LINK) { + // if (this.targetDoc!.anchor1 && this.targetDoc!.anchor2) { - const doc1 = Cast(this.props.doc!.anchor1, Doc, null); - const doc2 = Cast(this.props.doc!.anchor2, Doc, null); - Doc.UnBrushDoc(doc1); - Doc.UnBrushDoc(doc2); - } - } else { - Doc.UnBrushDoc(this.props.doc!); - } + // const doc1 = Cast(this.targetDoc!.anchor1, Doc, null); + // const doc2 = Cast(this.targetDoc!.anchor2, Doc, null); + // Doc.UnBrushDoc(doc1); + // Doc.UnBrushDoc(doc2); + // } + // } else { + // Doc.UnBrushDoc(this.targetDoc!); + // } } onContextMenu = (e: React.MouseEvent) => { @@ -245,7 +252,7 @@ export class SearchItem extends ViewBoxBaseComponent { - Utils.CopyText(this.props.doc![Id]); + Utils.CopyText(StrCast(this.targetDoc[Id])); }, icon: "fingerprint" }); @@ -270,7 +277,7 @@ export class SearchItem extends ViewBoxBaseComponent Utils.DRAG_THRESHOLD) { document.removeEventListener("pointermove", this.onPointerMoved); document.removeEventListener("pointerup", this.onPointerUp); - const doc = Doc.IsPrototype(this.props.doc!) ? Doc.MakeDelegate(this.props.doc!) : this.props.doc!; + const doc = Doc.IsPrototype(this.targetDoc) ? Doc.MakeDelegate(this.targetDoc) : this.targetDoc; DragManager.StartDocumentDrag([this._target], new DragManager.DocumentDragData([doc]), e.clientX, e.clientY); } } @@ -281,30 +288,33 @@ export class SearchItem extends ViewBoxBaseComponent CollectionDockingView.AddRightSplit(doc)} />; + return CollectionDockingView.AddRightSplit(doc)} />; } + @computed get searchElementDoc() { return this.rootDoc; } + @computed get targetDoc() { return this.searchElementDoc?.targetDoc as Doc; } + render() { - const doc1 = Cast(this.props.doc!.anchor1, Doc); - const doc2 = Cast(this.props.doc!.anchor2, Doc); + // const doc1 = Cast(this.targetDoc!.anchor1, Doc); + // const doc2 = Cast(this.targetDoc!.anchor2, Doc); return
-
{StrCast(this.props.doc!.title)}
-
{this.props.highlighting!.length ? "Matched fields:" + this.props.highlighting!.join(", ") : this.props.lines.length ? this.props.lines[0] : ""}
- {this.props.lines!.filter((m, i) => i).map((l, i) =>
`${l}`
)} +
{StrCast(this.targetDoc.title)}
+ {/*
{this.props.highlighting!.length ? "Matched fields:" + this.targetDoc.highlighting!.join(", ") : this.props.lines.length ? this.props.lines[0] : ""}
*/} + {/* {this.props.lines!.filter((m, i) => i).map((l, i) =>
`${l}`
)} */}
{this.DocumentIcon()}
-
{this.props.doc!.type ? this.props.doc!.type : "Other"}
+
{this.targetDoc.type ? this.targetDoc.type : "Other"}
- {(doc1 instanceof Doc && doc2 instanceof Doc) && this.props.doc!.type === DocumentType.LINK ? : - this.contextButton} + {/* {(doc1 instanceof Doc && doc2 instanceof Doc) && this.targetDoc!.type === DocumentType.LINK ? : + this.contextButton} */}
; -- cgit v1.2.3-70-g09d2