aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/util/DragManager.ts16
-rw-r--r--src/client/views/SearchBox.scss43
-rw-r--r--src/client/views/SearchBox.tsx106
-rw-r--r--src/server/Search.ts5
-rw-r--r--src/server/index.ts4
5 files changed, 110 insertions, 64 deletions
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 266679c16..c0402f0c9 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -6,28 +6,28 @@ import { CollectionDockingView } from "../views/collections/CollectionDockingVie
import * as globalCssVariables from "../views/globalCssVariables.scss";
export type dropActionType = "alias" | "copy" | undefined;
-export function SetupDrag(_reference: React.RefObject<HTMLDivElement>, docFunc: () => Doc, moveFunc?: DragManager.MoveFunction, dropAction?: dropActionType) {
- let onRowMove = action((e: PointerEvent): void => {
+export function SetupDrag(_reference: React.RefObject<HTMLElement>, docFunc: () => Doc | Promise<Doc>, moveFunc?: DragManager.MoveFunction, dropAction?: dropActionType) {
+ let onRowMove = async (e: PointerEvent) => {
e.stopPropagation();
e.preventDefault();
document.removeEventListener("pointermove", onRowMove);
document.removeEventListener('pointerup', onRowUp);
- var dragData = new DragManager.DocumentDragData([docFunc()]);
+ var dragData = new DragManager.DocumentDragData([await docFunc()]);
dragData.dropAction = dropAction;
dragData.moveDocument = moveFunc;
DragManager.StartDocumentDrag([_reference.current!], dragData, e.x, e.y);
- });
- let onRowUp = action((e: PointerEvent): void => {
+ };
+ let onRowUp = (): void => {
document.removeEventListener("pointermove", onRowMove);
document.removeEventListener('pointerup', onRowUp);
- });
- let onItemDown = (e: React.PointerEvent) => {
+ };
+ let onItemDown = async (e: React.PointerEvent) => {
// if (this.props.isSelected() || this.props.isTopMost) {
if (e.button === 0) {
e.stopPropagation();
if (e.shiftKey) {
- CollectionDockingView.Instance.StartOtherDrag([docFunc()], e);
+ CollectionDockingView.Instance.StartOtherDrag([await docFunc()], e);
} else {
document.addEventListener("pointermove", onRowMove);
document.addEventListener("pointerup", onRowUp);
diff --git a/src/client/views/SearchBox.scss b/src/client/views/SearchBox.scss
index 792d6dd3c..b38e6091d 100644
--- a/src/client/views/SearchBox.scss
+++ b/src/client/views/SearchBox.scss
@@ -1,47 +1,50 @@
@import "globalCssVariables";
-.searchBox {
+.searchBox-bar {
height: 32px;
- //display: flex;
- //padding: 4px;
- -webkit-transition: width 0.4s ease-in-out;
- transition: width 0.4s ease-in-out;
+ display: flex;
+ justify-content: flex-end;
align-items: center;
+ padding-left: 2px;
+ padding-right: 2px;
-
-
- input[type=text] {
+ .searchBox-input {
width: 130px;
-webkit-transition: width 0.4s;
transition: width 0.4s;
- position: absolute;
- right: 100px;
+ align-self: stretch;
}
- input[type=text]:focus {
+ .searchBox-input:focus {
width: 500px;
outline: 3px solid lightblue;
}
- .filter-button {
- position: absolute;
- right: 30px;
+ .searchBox-barChild {
+ flex: 0 1 auto;
+ margin-left: 2px;
+ margin-right: 2px;
}
- .submit-search {
- text-align: right;
+ .searchBox-filter {
+ align-self: stretch;
+ }
+
+ .searchBox-submit {
color: $dark-color;
- -webkit-transition: right 0.4s;
- transition: right 0.4s;
}
- .submit-search:hover {
+ .searchBox-submit:hover {
color: $main-accent;
transform: scale(1.05);
cursor: pointer;
}
}
+.searchBox-results {
+ margin-left: 27px; //Is there a better way to do this?
+}
+
.filter-form {
background: $dark-color;
height: 400px;
@@ -64,7 +67,7 @@
height: 20px;
}
-.results {
+.searchBox-results {
top: 300px;
display: flex;
flex-direction: column;
diff --git a/src/client/views/SearchBox.tsx b/src/client/views/SearchBox.tsx
index 7dd1af4e7..9b9735a4b 100644
--- a/src/client/views/SearchBox.tsx
+++ b/src/client/views/SearchBox.tsx
@@ -4,7 +4,7 @@ import { observable, action, runInAction } from 'mobx';
import { Utils } from '../../Utils';
import { MessageStore } from '../../server/Message';
import "./SearchBox.scss";
-import { faSearch } from '@fortawesome/free-solid-svg-icons';
+import { faSearch, faObjectGroup } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
// const app = express();
@@ -18,9 +18,11 @@ import { DocServer } from '../DocServer';
import { Doc } from '../../new_fields/Doc';
import { Id } from '../../new_fields/RefField';
import { DocumentManager } from '../util/DocumentManager';
-
+import { SetupDrag } from '../util/DragManager';
+import { Docs } from '../documents/Documents';
library.add(faSearch);
+library.add(faObjectGroup);
@observer
export class SearchBox extends React.Component {
@@ -40,30 +42,33 @@ export class SearchBox extends React.Component {
@action
submitSearch = async () => {
- runInAction(() => this._results = []);
let query = this.searchString;
-
- let response = await rp.get('http://localhost:1050/search', {
- qs: {
- query
- }
- });
- let results = JSON.parse(response);
-
//gets json result into a list of documents that can be used
- this.getResults(results);
+ const results = await this.getResults(query);
- runInAction(() => { this._resultsOpen = true; });
+ runInAction(() => {
+ this._resultsOpen = true;
+ this._results = results;
+ });
}
@action
- getResults = async (res: string[]) => {
- res.map(async result => {
- const doc = await DocServer.GetRefField(result);
- if (doc instanceof Doc) {
- runInAction(() => this._results.push(doc));
+ getResults = async (query: string) => {
+ let response = await rp.get('http://localhost:1050/search', {
+ qs: {
+ query
}
});
+ let res: string[] = JSON.parse(response);
+ const fields = await DocServer.GetRefFields(res);
+ const docs: Doc[] = [];
+ for (const id of res) {
+ const field = fields[id];
+ if (field instanceof Doc) {
+ docs.push(field);
+ }
+ }
+ return docs;
}
@action
@@ -82,6 +87,7 @@ export class SearchBox extends React.Component {
var id = (e.target as any).id;
if (id !== "result") {
this._resultsOpen = false;
+ this._results = [];
}
}
@@ -107,27 +113,63 @@ export class SearchBox extends React.Component {
}
}
+ collectionRef = React.createRef<HTMLSpanElement>();
+ startDragCollection = async () => {
+ const results = await this.getResults(this.searchString);
+ const docs = results.map(doc => {
+ const isProto = Doc.GetT(doc, "isPrototype", "boolean", true);
+ if (isProto) {
+ return Doc.MakeDelegate(doc);
+ } else {
+ return Doc.MakeAlias(doc);
+ }
+ });
+ let x = 0;
+ let y = 0;
+ for (const doc of docs) {
+ doc.x = x;
+ doc.y = y;
+ doc.width = 200;
+ doc.height = 200;
+ x += 250;
+ if (x > 1000) {
+ x = 0;
+ y += 250;
+ }
+ }
+ return Docs.FreeformDocument(docs, { width: 400, height: 400, panX: 175, panY: 175, title: `Search Docs: "${this.searchString}"` });
+ }
+
render() {
return (
- <div id="outer">
- <div className="searchBox" id="outer">
-
- <input value={this.searchString} onChange={this.onChange} type="text" placeholder="Search.." className="search" id="input" onKeyPress={this.enter} />
- <button className="filter-button" onClick={this.toggleFilterDisplay}> Filter </button>
- <div className="submit-search" id="submit" onClick={this.submitSearch}><FontAwesomeIcon style={{ height: "100%" }} icon="search" size="lg" /></div>
- <div className="results" id="results" style={this._resultsOpen ? { display: "flex" } : { display: "none" }}>
- {this._results.map(result => <SearchItem doc={result} key={result[Id]} />)}
+ <div>
+ <div className="searchBox-container">
+ <div className="searchBox-bar">
+ <span onPointerDown={SetupDrag(this.collectionRef, this.startDragCollection)} ref={this.collectionRef}>
+ <FontAwesomeIcon icon="object-group" className="searchBox-barChild" size="lg" />
+ </span>
+ <input value={this.searchString} onChange={this.onChange} type="text" placeholder="Search..."
+ className="searchBox-barChild searchBox-input" onKeyPress={this.enter}
+ style={{ width: this._resultsOpen ? "500px" : undefined }} />
+ <button className="searchBox-barChild searchBox-filter" onClick={this.toggleFilterDisplay}>Filter</button>
+ <FontAwesomeIcon icon="search" size="lg" className="searchBox-barChild searchBox-submit" />
</div>
+ {this._resultsOpen ? (
+ <div className="searchBox-results">
+ {this._results.map(result => <SearchItem doc={result} key={result[Id]} />)}
+ </div>
+ ) : null}
</div>
- <div className="filter-form" id="filter" style={this._open ? { display: "flex" } : { display: "none" }}>
- <div className="filter-form" id="header">Filter Search Results</div>
- <div className="filter-form" id="option">
- filter by collection, key, type of node
+ {this._open ? (
+ <div className="filter-form" id="filter" style={this._open ? { display: "flex" } : { display: "none" }}>
+ <div className="filter-form" id="header">Filter Search Results</div>
+ <div className="filter-form" id="option">
+ filter by collection, key, type of node
</div>
- </div>
+ </div>
+ ) : null}
</div>
-
);
}
} \ No newline at end of file
diff --git a/src/server/Search.ts b/src/server/Search.ts
index c3cb3c3e6..1bede5b49 100644
--- a/src/server/Search.ts
+++ b/src/server/Search.ts
@@ -8,11 +8,12 @@ export class Search {
public async updateDocument(document: any) {
try {
- return await rp.post(this.url + "dash/update", {
+ const res = await rp.post(this.url + "dash/update", {
headers: { 'content-type': 'application/json' },
body: JSON.stringify([document])
});
- } catch { }
+ return res;
+ } catch (e) { }
}
public async search(query: string) {
diff --git a/src/server/index.ts b/src/server/index.ts
index 7a548607f..6c64aa161 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -356,12 +356,12 @@ function UpdateField(socket: Socket, diff: Diff) {
for (let key in docfield) {
if (!key.startsWith("fields.")) continue;
dynfield = true;
- Object.values(suffixMap).forEach(suf => update[key + getSuffix(suf)] = null);
let val = docfield[key];
+ key = key.substring(7);
+ Object.values(suffixMap).forEach(suf => update[key + getSuffix(suf)] = null);
let term = ToSearchTerm(val);
if (term !== undefined) {
let { suffix, value } = term;
- key = key.substring(7);
update[key + suffix] = { set: value };
}
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-10 17:47:02 +0000