diff options
Diffstat (limited to 'src/client/views')
| -rw-r--r-- | src/client/views/MainView.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionViewChromes.scss | 2 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionViewChromes.tsx | 93 | ||||
| -rw-r--r-- | src/client/views/collections/KeyRestrictionRow.tsx | 6 | ||||
| -rw-r--r-- | src/client/views/nodes/FormattedTextBox.tsx | 9 |
5 files changed, 93 insertions, 19 deletions
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 1f68101f1..b34a901e1 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -481,7 +481,7 @@ export class MainView extends React.Component { }; return < div id="add-nodes-menu" style={{ left: this.flyoutWidth + 20, bottom: 20 }} > <input type="checkbox" id="add-menu-toggle" ref={this.addMenuToggle} /> - <label htmlFor="add-menu-toggle" style={{ marginTop: 2 }} title="Add Node"><p>+</p></label> + <label htmlFor="add-menu-toggle" style={{ marginTop: 2 }} title="Close Menu"><p>+</p></label> <div id="add-options-content"> <ul id="add-options-list"> diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss index 793cb7a8b..2006c08f3 100644 --- a/src/client/views/collections/CollectionViewChromes.scss +++ b/src/client/views/collections/CollectionViewChromes.scss @@ -97,7 +97,7 @@ .collectionViewBaseChrome-viewSpecsMenu-lastRow { display: grid; - grid-template-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; margin: 10px; } diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index bccc0a5b2..84f64e2cf 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -5,7 +5,7 @@ import { CollectionViewType } from "./CollectionBaseView"; import { undoBatch } from "../../util/UndoManager"; import { action, observable, runInAction, computed, IObservable, IObservableValue, reaction, autorun } from "mobx"; import { observer } from "mobx-react"; -import { Doc, DocListCast } from "../../../new_fields/Doc"; +import { Doc, DocListCast, FieldResult } from "../../../new_fields/Doc"; import { DocLike } from "../MetadataEntryMenu"; import * as Autosuggest from 'react-autosuggest'; import { EditableView } from "../EditableView"; @@ -22,6 +22,8 @@ import { List } from "../../../new_fields/List"; import { Id } from "../../../new_fields/FieldSymbols"; import { threadId } from "worker_threads"; const datepicker = require('js-datepicker'); +import * as $ from 'jquery'; +import { firebasedynamiclinks } from "googleapis/build/src/apis/firebasedynamiclinks"; interface CollectionViewChromeProps { CollectionView: CollectionView; @@ -29,10 +31,18 @@ interface CollectionViewChromeProps { collapse?: (value: boolean) => any; } +interface Filter { + key: string; + value: string; + contains: boolean; +} + let stopPropagation = (e: React.SyntheticEvent) => e.stopPropagation(); @observer export class CollectionViewBaseChrome extends React.Component<CollectionViewChromeProps> { + //(!)?\(\(\(doc.(\w+) && \(doc.\w+ as \w+\).includes\(\"(\w+)\"\) + @observable private _viewSpecsOpen: boolean = false; @observable private _dateWithinValue: string = ""; @observable private _dateValue: Date | string = ""; @@ -42,6 +52,43 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewChro private _picker: any; private _datePickerElGuid = Utils.GenerateGuid(); + getFilters = (script: string) => { + let re: any = /(!)?\(\(\(doc\.(\w+)\s+&&\s+\(doc\.\w+\s+as\s+\w+\)\.includes\(\"(\w+)\"\)/g; + let arr: any[] = re.exec(script); + let toReturn: Filter[] = []; + if (arr !== null) { + let filter: Filter = { + key: arr[2], + value: arr[3], + contains: (arr[1] === "!") ? false : true, + }; + toReturn.push(filter); + script = script.replace(arr[0], ""); + if (re.exec(script) !== null) { + toReturn.push(...this.getFilters(script)); + } + else { return toReturn; } + } + return toReturn; + } + + addKeyRestrictions = (fields: Filter[]) => { + + if (fields.length !== 0) { + for (let i = 0; i < fields.length; i++) { + this._keyRestrictions.push([<KeyRestrictionRow field={fields[i].key} value={fields[i].value} key={Utils.GenerateGuid()} contains={fields[i].contains} script={(value: string) => runInAction(() => this._keyRestrictions[i][1] = value)} />, ""]); + + } + if (this._keyRestrictions.length === 1) { + this._keyRestrictions.push([<KeyRestrictionRow field="" value="" key={Utils.GenerateGuid()} contains={true} script={(value: string) => runInAction(() => this._keyRestrictions[1][1] = value)} />, ""]); + } + } + else { + this._keyRestrictions.push([<KeyRestrictionRow field="" value="" key={Utils.GenerateGuid()} contains={true} script={(value: string) => runInAction(() => this._keyRestrictions[0][1] = value)} />, ""]); + this._keyRestrictions.push([<KeyRestrictionRow field="" value="" key={Utils.GenerateGuid()} contains={false} script={(value: string) => runInAction(() => this._keyRestrictions[1][1] = value)} />, ""]); + } + } + componentDidMount = () => { setTimeout(() => this._picker = datepicker("#" + this._datePickerElGuid, { disabler: (date: Date) => date > new Date(), @@ -49,10 +96,14 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewChro dateSelected: new Date() }), 1000); - runInAction(() => { - this._keyRestrictions.push([<KeyRestrictionRow key={Utils.GenerateGuid()} contains={true} script={(value: string) => runInAction(() => this._keyRestrictions[0][1] = value)} />, ""]); - this._keyRestrictions.push([<KeyRestrictionRow key={Utils.GenerateGuid()} contains={false} script={(value: string) => runInAction(() => this._keyRestrictions[1][1] = value)} />, ""]); + let fields: Filter[] = []; + if (this.filterValue) { + let string = this.filterValue.script.originalScript; + fields = this.getFilters(string); + } + runInAction(() => { + this.addKeyRestrictions(fields); // chrome status is one of disabled, collapsed, or visible. this determines initial state from document let chromeStatus = this.props.CollectionView.props.Document.chromeStatus; if (chromeStatus) { @@ -111,17 +162,19 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewChro @action addKeyRestriction = (e: React.MouseEvent) => { let index = this._keyRestrictions.length; - this._keyRestrictions.push([<KeyRestrictionRow key={Utils.GenerateGuid()} contains={true} script={(value: string) => runInAction(() => this._keyRestrictions[index][1] = value)} />, ""]); + this._keyRestrictions.push([<KeyRestrictionRow field="" value="" key={Utils.GenerateGuid()} contains={true} script={(value: string) => runInAction(() => this._keyRestrictions[index][1] = value)} />, ""]); this.openViewSpecs(e); } - @action + @action.bound applyFilter = (e: React.MouseEvent) => { + this.openViewSpecs(e); - let keyRestrictionScript = `${this._keyRestrictions.map(i => i[1]) - .reduce((acc: string, value: string, i: number) => value ? `${acc} && ${value}` : acc)}`; + console.log(this._keyRestrictions) + + let keyRestrictionScript = "(" + this._keyRestrictions.map(i => i[1]).filter(i => i.length > 0).join(" && ") + ")"; let yearOffset = this._dateWithinValue[1] === 'y' ? 1 : 0; let monthOffset = this._dateWithinValue[1] === 'm' ? parseInt(this._dateWithinValue[0]) : 0; let weekOffset = this._dateWithinValue[1] === 'w' ? parseInt(this._dateWithinValue[0]) : 0; @@ -141,9 +194,10 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewChro } } let fullScript = dateRestrictionScript.length || keyRestrictionScript.length ? dateRestrictionScript.length ? - `return ${dateRestrictionScript} ${keyRestrictionScript.length ? "&&" : ""} ${keyRestrictionScript}` : - `return ${keyRestrictionScript} ${dateRestrictionScript.length ? "&&" : ""} ${dateRestrictionScript}` : + `return ${dateRestrictionScript} ${keyRestrictionScript.length ? "&&" : ""} (${keyRestrictionScript})` : + `return (${keyRestrictionScript}) ${dateRestrictionScript.length ? "&&" : ""} ${dateRestrictionScript}` : "return true"; + let compiled = CompileScript(fullScript, { params: { doc: Doc.name }, typecheck: false }); if (compiled.compiled) { this.props.CollectionView.props.Document.viewSpecScript = new ScriptField(compiled); @@ -215,6 +269,17 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewChro })} />); } + @action.bound + clearFilter = () => { + let compiled = CompileScript("return true", { params: { doc: Doc.name }, typecheck: false }); + if (compiled.compiled) { + this.props.CollectionView.props.Document.viewSpecScript = new ScriptField(compiled); + } + + this._keyRestrictions = []; + this.addKeyRestrictions([]); + } + render() { let collapsed = this.props.CollectionView.props.Document.chromeStatus !== "enabled"; return ( @@ -245,9 +310,10 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewChro <div className="collectionViewBaseChrome-viewSpecs" style={{ display: collapsed ? "none" : "grid" }}> <input className="collectionViewBaseChrome-viewSpecsInput" placeholder="FILTER DOCUMENTS" - value={this.filterValue ? this.filterValue.script.originalScript : ""} + value={this.filterValue ? this.filterValue.script.originalScript === "return true" ? "" : this.filterValue.script.originalScript : ""} onChange={(e) => { }} - onPointerDown={this.openViewSpecs} /> + onPointerDown={this.openViewSpecs} + id="viewSpecsInput" /> {this.getPivotInput()} <div className="collectionViewBaseChrome-viewSpecsMenu" onPointerDown={this.openViewSpecs} @@ -287,6 +353,9 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewChro <button className="collectonViewBaseChrome-viewSpecsMenu-lastRowButton" onClick={this.applyFilter}> APPLY FILTER </button> + <button className="collectonViewBaseChrome-viewSpecsMenu-lastRowButton" onClick={this.clearFilter}> + CLEAR + </button> </div> </div> </div> diff --git a/src/client/views/collections/KeyRestrictionRow.tsx b/src/client/views/collections/KeyRestrictionRow.tsx index 1b59547d8..e35b7d7d3 100644 --- a/src/client/views/collections/KeyRestrictionRow.tsx +++ b/src/client/views/collections/KeyRestrictionRow.tsx @@ -7,12 +7,14 @@ import { Doc } from "../../../new_fields/Doc"; interface IKeyRestrictionProps { contains: boolean; script: (value: string) => void; + field: string; + value: string; } @observer export default class KeyRestrictionRow extends React.Component<IKeyRestrictionProps> { - @observable private _key = ""; - @observable private _value = ""; + @observable private _key = this.props.field; + @observable private _value = this.props.value; @observable private _contains = this.props.contains; render() { diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 732576328..afdc035e8 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -8,7 +8,7 @@ import { keymap } from "prosemirror-keymap"; import { Node as ProsNode } from "prosemirror-model"; import { EditorState, Plugin, Transaction, Selection } from "prosemirror-state"; import { NodeType, Slice, Node, Fragment } from 'prosemirror-model'; -import { EditorView } from "prosemirror-view"; +import { EditorView, NodeView } from "prosemirror-view"; import { Doc, Opt, DocListCast } from "../../../new_fields/Doc"; import { Id, Copy } from '../../../new_fields/FieldSymbols'; import { List } from '../../../new_fields/List'; @@ -21,7 +21,7 @@ import { DocumentManager } from '../../util/DocumentManager'; import { DragManager } from "../../util/DragManager"; import buildKeymap from "../../util/ProsemirrorExampleTransfer"; import { inpRules } from "../../util/RichTextRules"; -import { ImageResizeView, schema, SummarizedView } from "../../util/RichTextSchema"; +import { ImageResizeView, schema, SummarizedView, CheckboxView } from "../../util/RichTextSchema"; import { SelectionManager } from "../../util/SelectionManager"; import { TooltipLinkingMenu } from "../../util/TooltipLinkingMenu"; import { TooltipTextMenu } from "../../util/TooltipTextMenu"; @@ -36,6 +36,7 @@ import React = require("react"); import { DateField } from '../../../new_fields/DateField'; import { Utils } from '../../../Utils'; import { MainOverlayTextBox } from '../MainOverlayTextBox'; +import { CheckBox } from '../search/CheckBox'; library.add(faEdit); library.add(faSmile, faTextHeight); @@ -166,6 +167,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe this._editorView.updateState(state); if (state.selection.empty && FormattedTextBox._toolTipTextMenu) { const marks = tx.storedMarks; + console.log(marks) if (marks) { FormattedTextBox._toolTipTextMenu.mark_key_pressed(marks); } } this._applyingChange = true; @@ -448,7 +450,8 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe dispatchTransaction: this.dispatchTransaction, nodeViews: { image(node, view, getPos) { return new ImageResizeView(node, view, getPos); }, - star(node, view, getPos) { return new SummarizedView(node, view, getPos); } + star(node, view, getPos) { return new SummarizedView(node, view, getPos); }, + checkbox(node, view, getPos) { return new CheckboxView(node, view, getPos) as NodeView<any>; } }, clipboardTextSerializer: this.clipboardTextSerializer, handlePaste: this.handlePaste, |