aboutsummaryrefslogtreecommitdiff
path: root/src/client/views
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views')
-rw-r--r--src/client/views/SearchBox.scss70
-rw-r--r--src/client/views/SearchBox.tsx24
-rw-r--r--src/client/views/SearchItem.tsx109
-rw-r--r--src/client/views/ViewItem.tsx18
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.scss2
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx2
6 files changed, 166 insertions, 59 deletions
diff --git a/src/client/views/SearchBox.scss b/src/client/views/SearchBox.scss
index b38e6091d..22b198739 100644
--- a/src/client/views/SearchBox.scss
+++ b/src/client/views/SearchBox.scss
@@ -48,7 +48,6 @@
.filter-form {
background: $dark-color;
height: 400px;
- width: 400px;
position: relative;
right: 1px;
color: $light-color;
@@ -71,15 +70,14 @@
top: 300px;
display: flex;
flex-direction: column;
+ margin-right: 72px;
.search-item {
+ pointer-events: auto;
width: 500px;
- height: 50px;
background: $light-color-secondary;
- display: flex;
justify-content: space-between;
align-items: center;
- transition: all 0.1s;
border-width: 0.11px;
border-style: none;
border-color: $intermediate-color;
@@ -89,6 +87,18 @@
font-size: 13px;
}
+ .search-info {
+ display: flex;
+ justify-content: flex-end;
+ width: 100%;
+ }
+
+ .main-search-info {
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ }
+
.search-item:hover {
transition: all 0.1s;
background: $lighter-alt-accent;
@@ -98,5 +108,57 @@
text-transform: uppercase;
text-align: left;
width: 8vw;
+ font-weight: bold;
+ }
+
+ .more-search-info {
+ text-align: left;
+ }
+
+ .link-count {
+ height: 25px;
+ width: 25px;
+ border-radius: 50%;
+ background: $dark-color;
+ color: $light-color-secondary;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-right: 10px;
+ }
+
+ .search-type {
+ width: 25PX;
+ height: 25PX;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+
+ .searchBox-instances {
+ display: inline-block;
+ background: $dark-color;
+ width: 100px;
+ opacity: 1;
+ // width: 0px; this is real
+ // visibility: hidden;
+ // opacity: 0; THIS IS REAL
+ // transition: all 0.2s ease;
+ color: $light-color;
+ }
+
+ .search-overview {
+ display: flex;
+ // float: left;
+ justify-content: flex-end;
+ }
+
+ .search-overview:hover {
+ .searchBox-instances {
+ // visibility: visible;
+ opacity: 1;
+ width: 100px;
+ }
}
} \ No newline at end of file
diff --git a/src/client/views/SearchBox.tsx b/src/client/views/SearchBox.tsx
index 63d2065e2..51fcb4596 100644
--- a/src/client/views/SearchBox.tsx
+++ b/src/client/views/SearchBox.tsx
@@ -22,6 +22,7 @@ import { SetupDrag } from '../util/DragManager';
import { Docs } from '../documents/Documents';
import { RouteStore } from '../../server/RouteStore';
import { NumCast } from '../../new_fields/Types';
+import { SearchUtil } from '../util/SearchUtil';
library.add(faSearch);
library.add(faObjectGroup);
@@ -169,6 +170,18 @@ export class SearchBox extends React.Component {
return Docs.FreeformDocument(docs, { width: 400, height: 400, panX: 175, panY: 175, backgroundColor: "grey", title: `Search Docs: "${this.searchString}"` });
}
+ @action
+ getViews = async (doc: Doc) => {
+ console.log("getting view")
+ const results = await SearchUtil.GetViewsOfDocument(doc);
+ let toReturn: Doc[] = [];
+ await runInAction(() => {
+ toReturn = results;
+ });
+ return toReturn;
+ }
+
+
// Useful queries:
// Delegates of a document: {!join from=id to=proto_i}id:{protoId}
// Documents in a collection: {!join from=data_l to=id}id:{collectionProtoId}
@@ -183,12 +196,19 @@ export class SearchBox extends React.Component {
<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> */}
+ <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]} />)}
+ {this._results.map(result => {
+ this.getViews(result).then((res: Doc[]) => {
+ console.log("found")
+ return <SearchItem doc={result} views={res} key={result[Id]} />
+ })
+ })}
+ {/* {this._results.map(result => <SearchItem doc={result} views = {this.getViews(result)} key={result[Id]} />)} */}
+ {/*views = {this.getViews(result)}*/}
</div>
) : null}
</div>
diff --git a/src/client/views/SearchItem.tsx b/src/client/views/SearchItem.tsx
index cf440535d..e82aa0719 100644
--- a/src/client/views/SearchItem.tsx
+++ b/src/client/views/SearchItem.tsx
@@ -2,26 +2,31 @@ import React = require("react");
import { Doc } from "../../new_fields/Doc";
import { DocumentManager } from "../util/DocumentManager";
import { library } from '@fortawesome/fontawesome-svg-core';
-import { faCaretUp, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote } from '@fortawesome/free-solid-svg-icons';
+import { faCaretUp, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Cast } from "../../new_fields/Types";
import { FieldView, FieldViewProps } from './nodes/FieldView';
-import { computed, observable } from "mobx";
+import { computed, observable, action, runInAction } from "mobx";
import { IconField } from "../../new_fields/IconField";
import { listSpec } from "../../new_fields/Schema";
import { Transform } from "../util/Transform";
import { ObjectField } from "../../new_fields/ObjectField";
import { RichTextField } from "../../new_fields/RichTextField";
import { SetupDrag } from "../util/DragManager";
+import { SearchUtil } from "../util/SearchUtil";
+import { Id } from "../../new_fields/FieldSymbols";
+import { ViewItem } from "./ViewItem";
export interface SearchProps {
doc: Doc;
+ views: Doc[];
}
export interface SearchItemProps {
doc: Doc;
- subitems: FieldViewProps;
+ views: Doc[];
+ // subitems: FieldViewProps;
}
library.add(faCaretUp);
@@ -29,15 +34,31 @@ library.add(faObjectGroup);
library.add(faStickyNote);
library.add(faFilePdf);
library.add(faFilm);
+library.add(faMusic);
+library.add(faLink);
+library.add(faChartBar);
+library.add(faGlobeAsia);
export class SearchItem extends React.Component<SearchItemProps> {
@observable _selected: boolean = false;
+ @observable
+ private _instances: Doc[] = [];
+
+ // @action
+ // getViews = async () => {
+ // const results = await SearchUtil.GetViewsOfDocument(this.props.doc);
+ // runInAction(() => {
+ // this._instances = results;
+ // });
+ // }
+
onClick = () => {
DocumentManager.Instance.jumpToDocument(this.props.doc);
}
+ //something wrong with this
containingCollection(): string {
let docView = DocumentManager.Instance.getDocumentView(this.props.doc);
if (docView) {
@@ -51,6 +72,7 @@ export class SearchItem extends React.Component<SearchItemProps> {
return "None";
}
+ //also probably with this rip
containingCollectionView() {
let docView = DocumentManager.Instance.getDocumentView(this.props.doc);
if (docView) {
@@ -64,17 +86,18 @@ export class SearchItem extends React.Component<SearchItemProps> {
}
public DocumentIcon() {
- let layoutresult = Cast(this.props.doc.layout, "string", "");
-
- //TODO: images showing up as collections because the layout is collectionview
- console.log(layoutresult)
-
- let button = layoutresult.indexOf("PDFBox") !== -1 ? faFilePdf :
- layoutresult.indexOf("ImageBox") !== -1 ? faImage :
- layoutresult.indexOf("Formatted") !== -1 ? faStickyNote :
- layoutresult.indexOf("Video") !== -1 ? faFilm :
- layoutresult.indexOf("Collection") !== -1 ? faObjectGroup :
- faCaretUp;
+ let layoutresult = Cast(this.props.doc.type, "string", "");
+
+ let button = layoutresult.indexOf("pdf") !== -1 ? faFilePdf :
+ layoutresult.indexOf("image") !== -1 ? faImage :
+ layoutresult.indexOf("text") !== -1 ? faStickyNote :
+ layoutresult.indexOf("video") !== -1 ? faFilm :
+ layoutresult.indexOf("collection") !== -1 ? faObjectGroup :
+ layoutresult.indexOf("audio") !== -1 ? faMusic :
+ layoutresult.indexOf("link") !== -1 ? faLink :
+ layoutresult.indexOf("histogram") !== -1 ? faChartBar :
+ layoutresult.indexOf("web") !== -1 ? faGlobeAsia :
+ faCaretUp;
return <FontAwesomeIcon icon={button} size="2x" />;
}
@@ -91,59 +114,43 @@ export class SearchItem extends React.Component<SearchItemProps> {
select = () => {
// console.log('moused');
- // console.log("before:", this.props.doc[Id], this._selected)
+ // console.log("before:", this.props.doc, this._selected)
this._selected = !this._selected;
- // console.log("after:", this.props.doc[Id], this._selected)
+ // console.log("after:", this.props.doc, this._selected)
}
linkCount = () => {
+ console.log("counting")
let linkToSize = Cast(this.props.doc.linkedToDocs, listSpec(Doc), []).length;
let linkFromSize = Cast(this.props.doc.linkedFromDocs, listSpec(Doc), []).length;
let linkCount = linkToSize + linkFromSize;
- console.log(linkCount)
return linkCount;
}
- //taken from collectionschemaview, counld show doc preview to the left of the results. not sure if this should go in here
- // get previewDocument(): Doc | undefined {
- // const children = Cast(this.props.doc[this.props.subitems.fieldKey], listSpec(Doc), []);
- // const selected = children.length > this._selectedIndex ? FieldValue(children[this._selectedIndex]) : undefined;
- // return selected ? (this.previewScript ? FieldValue(Cast(selected[this.previewScript], Doc)) : selected) : undefined;
- // }
-
- // get previewRegionHeight() { return 200; }
- // get previewRegionWidth() { return 300; }
- // private previewDocNativeWidth = () => Cast(this.previewDocument!.nativeWidth, "number", this.previewRegionWidth);
- // private previewDocNativeHeight = () => Cast(this.previewDocument!.nativeHeight, "number", this.previewRegionHeight);
- // private previewContentScaling = () => {
- // let wscale = this.previewRegionWidth / (this.previewDocNativeWidth() ? this.previewDocNativeWidth() : this.previewRegionWidth);
- // if (wscale * this.previewDocNativeHeight() > this.previewRegionHeight) {
- // return this.previewRegionHeight / (this.previewDocNativeHeight() ? this.previewDocNativeHeight() : this.previewRegionHeight);
- // }
- // return wscale;
- // }
- // private previewPanelWidth = () => this.previewDocNativeWidth() * this.previewContentScaling();
- // private previewPanelHeight = () => this.previewDocNativeHeight() * this.previewContentScaling();
- // get previewPanelCenteringOffset() { return (this.previewRegionWidth - this.previewDocNativeWidth() * this.previewContentScaling()) / 2; }
- // getPreviewTransform = (): Transform => this.props.ScreenToLocalTransform().translate(
- // - this.borderWidth - this.DIVIDER_WIDTH - this.tableWidth - this.previewPanelCenteringOffset,
- // - this.borderWidth).scale(1 / this.previewContentScaling())
-
-
render() {
return (
- <div>
- <div className="search-item" onMouseOver={this.select} onMouseOut={this.select} ref={this.collectionRef} id="result" onClick={this.onClick} onPointerDown={SetupDrag(this.collectionRef, this.startDocDrag)} >
- <div className="search-title" id="result" >title: {this.props.doc.title}</div>
- <div className="search-info">
- <div className="link-count">{this.linkCount()}</div>
- <div className="search-type" >{this.DocumentIcon()}</div>
+ <div className="search-overview" onMouseOver={this.select} onMouseOut={this.select}>
+ <div className="searchBox-instances">
+ {this.props.views.map(result => <ViewItem doc={result} key={result[Id]} />)}
+ </div>
+ <div className="search-item" ref={this.collectionRef} id="result" onClick={this.onClick} onPointerDown={SetupDrag(this.collectionRef, this.startDocDrag)} >
+ <div className="main-search-info">
+ <div className="search-title" id="result" >{this.props.doc.title}</div>
+ <div className="search-info">
+ <div className="link-count">{this.linkCount()}</div>
+ <div className="search-type" >{this.DocumentIcon()}</div>
+ </div>
+ </div>
+ <div className="more-search-info">
+ <div className="found">Where Found: (i.e. title, body, etc)</div>
+ {/* <div className="containing-collection">Collection: {this.containingCollection()}</div> */}
</div>
</div>
- <div className="expanded-result" style={this._selected ? { display: "flex" } : { display: "none" }}>
+
+ {/* <div className="expanded-result" style={this._selected ? { display: "flex" } : { display: "none" }}>
<div className="collection-label">Collection: {this.containingCollection()}</div>
<div className="preview"></div>
- </div>
+ </div> */}
</div>
);
}
diff --git a/src/client/views/ViewItem.tsx b/src/client/views/ViewItem.tsx
new file mode 100644
index 000000000..85f436b44
--- /dev/null
+++ b/src/client/views/ViewItem.tsx
@@ -0,0 +1,18 @@
+import { Doc } from "../../new_fields/Doc";
+import React = require("react");
+import "./SearchBox.scss";
+
+export interface ViewitemProps {
+ doc: Doc;
+ // subitems: FieldViewProps;
+}
+
+export class ViewItem extends React.Component<ViewitemProps> {
+
+ render() {
+ return (
+ <div>{this.props.doc.title}</div>
+
+ );
+ }
+} \ No newline at end of file
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.scss
index 30e158603..a80e09fa8 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.scss
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.scss
@@ -1,4 +1,4 @@
-.collectionfreeformlinksview-svgCanvas{
+p.collectionfreeformlinksview-svgCanvas{
transform: translate(-10000px,-10000px);
position: absolute;
top: 0;
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
index a43c5f241..2df66ce54 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
@@ -110,7 +110,7 @@ export class CollectionFreeFormLinksView extends React.Component<CollectionViewP
}
return match || found;
}, false)) {
- console.log("A" + possiblePair.a[Id] + " B" + possiblePair.b[Id] + " L" + connection.l[Id]);
+ //console.log("A" + possiblePair.a[Id] + " B" + possiblePair.b[Id] + " L" + connection.l[Id]);
drawnPairs.push({ a: possiblePair.a, b: possiblePair.b, l: [connection.l] })
}
});
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-03-01 21:07:22 +0000