From 0381050cab3cbcf6f1c3552fa86cace3a1654a07 Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Mon, 22 Feb 2021 21:25:25 -0500 Subject: filters scope changes --- src/client/views/PropertiesView.scss | 62 ++++++++++++ src/client/views/PropertiesView.tsx | 107 +++++++++++++------- src/client/views/nodes/FilterBox.scss | 34 +++---- src/client/views/nodes/FilterBox.tsx | 182 +++++++++++++++++----------------- src/fields/Doc.ts | 6 +- 5 files changed, 240 insertions(+), 151 deletions(-) diff --git a/src/client/views/PropertiesView.scss b/src/client/views/PropertiesView.scss index 1365725cb..134c50972 100644 --- a/src/client/views/PropertiesView.scss +++ b/src/client/views/PropertiesView.scss @@ -157,6 +157,67 @@ } } + .propertiesView-filters { + //border-bottom: 1px solid black; + //padding: 8.5px; + + .propertiesView-filters-title { + font-weight: bold; + font-size: 12.5px; + padding: 4px; + display: flex; + color: white; + padding-left: 8px; + background-color: rgb(51, 51, 51); + + &:hover { + cursor: pointer; + } + + .propertiesView-filters-title-icon { + float: right; + justify-items: right; + align-items: flex-end; + margin-left: auto; + margin-right: 9px; + + &:hover { + cursor: pointer; + } + } + } + + .propertiesView-filters-content { + font-size: 10px; + padding: 10px; + margin-left: 5px; + max-height: 40%; + overflow-y: auto; + + .propertiesView-buttonContainer { + float: right; + display: flex; + + button { + width: 15; + height: 15; + padding: 0; + margin-top: -5; + } + } + + button { + width: 5; + height: 5; + } + + input { + width: 100%; + } + } + } + + .propertiesView-appearance { //border-bottom: 1px solid black; //padding: 8.5px; @@ -332,6 +393,7 @@ } } } + .propertiesView-fields { //border-bottom: 1px solid black; //padding: 8.5px; diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index ae6c7c50c..388b688cd 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -2,10 +2,10 @@ import React = require("react"); import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { Checkbox, Tooltip } from "@material-ui/core"; import { intersection } from "lodash"; -import { action, computed, observable } from "mobx"; +import { action, autorun, computed, Lambda, observable, reaction, runInAction } from "mobx"; import { observer } from "mobx-react"; import { ColorState, SketchPicker } from "react-color"; -import { AclAddonly, AclAdmin, AclEdit, AclPrivate, AclReadonly, AclSym, AclUnset, DataSym, Doc, Field, HeightSym, WidthSym } from "../../fields/Doc"; +import { AclAddonly, AclAdmin, AclEdit, AclPrivate, AclReadonly, AclSym, AclUnset, DataSym, Doc, Field, HeightSym, Opt, WidthSym } from "../../fields/Doc"; import { Id } from "../../fields/FieldSymbols"; import { InkField } from "../../fields/InkField"; import { ComputedField } from "../../fields/ScriptField"; @@ -29,6 +29,7 @@ import { PropertiesButtons } from "./PropertiesButtons"; import { PropertiesDocContextSelector } from "./PropertiesDocContextSelector"; import "./PropertiesView.scss"; import { DefaultStyleProvider, FilteringStyleProvider } from "./StyleProvider"; +import { CurrentUserUtils } from "../util/CurrentUserUtils"; import { FilterBox } from "./nodes/FilterBox"; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; @@ -48,6 +49,9 @@ export class PropertiesView extends React.Component { @computed get MAX_EMBED_HEIGHT() { return 200; } @computed get selectedDoc() { return SelectionManager.SelectedSchemaDoc() || this.selectedDocumentView?.rootDoc; } + @computed get filterDoc() { + return FilterBox._filterScope === "Current Collection" ? this.selectedDoc || CollectionDockingView.Instance.props.Document : CollectionDockingView.Instance.props.Document; + } @computed get selectedDocumentView() { if (SelectionManager.Views().length) return SelectionManager.Views()[0]; if (PresBox.Instance?._selectedArray.size) return DocumentManager.Instance.getDocumentView(PresBox.Instance.rootDoc); @@ -68,7 +72,9 @@ export class PropertiesView extends React.Component { @observable openContexts: boolean = true; @observable openAppearance: boolean = true; @observable openTransform: boolean = true; - @observable openFilters: boolean = true; + @observable openFilters: boolean = true; // should be false + + private selectedDocListenerDisposer: Opt; // @observable selectedUser: string = ""; // @observable addButtonPressed: boolean = false; @@ -84,6 +90,15 @@ export class PropertiesView extends React.Component { @observable _controlBtn: boolean = false; @observable _lock: boolean = false; + componentDidMount() { + this.selectedDocListenerDisposer?.(); + this.selectedDocListenerDisposer = autorun(() => this.openFilters && this.selectedDoc && this.checkFilterDoc()); + } + + componentWillUnmount() { + this.selectedDocListenerDisposer?.(); + } + @computed get isInk() { return this.selectedDoc?.type === DocumentType.INK; } rtfWidth = () => { @@ -885,44 +900,63 @@ export class PropertiesView extends React.Component { ; } + checkFilterDoc() { + if (this.filterDoc.type === DocumentType.COL && !this.filterDoc.currentFilter) CurrentUserUtils.setupFilterDocs(this.filterDoc!); + } + + saveFilter = () => { + this.filterDoc.currentFilter = undefined; + CurrentUserUtils.setupFilterDocs(this.filterDoc); + } + + myFiltersSelect = (doc: Doc) => { + this.filterDoc.currentFilter = doc; + } + @computed get filtersSubMenu() { - return
-
+
this.openFilters = !this.openFilters)} style={{ backgroundColor: this.openFilters ? "black" : "" }}> Filters -
+
- {!this.openFilters ? (null) : -
- -
} -
; + { + !this.openFilters || !this.filterDoc.currentFilter ? (null) : +
+ +
+ } +
; } @computed get inkSubMenu() { @@ -1022,7 +1056,6 @@ export class PropertiesView extends React.Component { // } render() { - // console.log(this.props.width); if (!this.selectedDoc && !this.isPres) { return
@@ -1047,6 +1080,8 @@ export class PropertiesView extends React.Component { {this.sharingSubMenu} + {this.selectedDoc.type === DocumentType.COL && this.filtersSubMenu} + {this.inkSubMenu} {this.fieldsSubMenu} @@ -1054,8 +1089,6 @@ export class PropertiesView extends React.Component { {this.contextsSubMenu} {this.layoutSubMenu} - - {this.filtersSubMenu}
; } if (this.isPres) { diff --git a/src/client/views/nodes/FilterBox.scss b/src/client/views/nodes/FilterBox.scss index b1b3c0f25..4fe1fa2eb 100644 --- a/src/client/views/nodes/FilterBox.scss +++ b/src/client/views/nodes/FilterBox.scss @@ -28,15 +28,15 @@ } // .filterBox-bottom { - // // position: fixed; - // // bottom: 0; - // // width: 100%; - // } +// // position: fixed; +// // bottom: 0; +// // width: 100%; +// } .filterBox-select { - width: 90%; + // width: 90%; margin-top: 5px; - margin-bottom: 15px; + // margin-bottom: 15px; } @@ -64,20 +64,6 @@ } -.filterBox-title { - - justify-content: center; - text-align: center; - padding-bottom: 13px; - font-size: 20px; - font-weight: bold; - - .filterBox-span { - margin-right: 15px; - } - -} - .filterBox-select-scope, .filterBox-select-bool, .filterBox-addWrapper, @@ -112,6 +98,14 @@ border-bottom: 2px solid black; } +.filterBox-title { + font-size: 15; + // border: 2px solid black; + width: 100%; + align-self: center; + text-align: center; + background-color: #d3d3d3; +} .filterBox-select-bool { margin-top: 6px; diff --git a/src/client/views/nodes/FilterBox.tsx b/src/client/views/nodes/FilterBox.tsx index ec77775be..987939d65 100644 --- a/src/client/views/nodes/FilterBox.tsx +++ b/src/client/views/nodes/FilterBox.tsx @@ -1,8 +1,8 @@ import React = require("react"); import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { action, computed } from "mobx"; +import { action, computed, observable, runInAction } from "mobx"; import { observer } from "mobx-react"; -import { DataSym, Doc, DocListCast, Field, Opt } from "../../../fields/Doc"; +import { DataSym, Doc, DocListCast, DocListCastAsync, Field, Opt } from "../../../fields/Doc"; import { documentSchema } from "../../../fields/documentSchemas"; import { List } from "../../../fields/List"; import { RichTextField } from "../../../fields/RichTextField"; @@ -30,22 +30,30 @@ import { UserOptions } from "../../util/GroupManager"; import { DocumentViewProps } from "./DocumentView"; import { DefaultStyleProvider, StyleProp } from "../StyleProvider"; import { CollectionViewType } from "../collections/CollectionView"; +import { CurrentUserUtils } from "../../util/CurrentUserUtils"; type FilterBoxDocument = makeInterface<[typeof documentSchema]>; const FilterBoxDocument = makeInterface(documentSchema); @observer export class FilterBox extends ViewBoxBaseComponent(FilterBoxDocument) { + + static Instance: FilterBox; + constructor(props: Readonly) { super(props); + FilterBox.Instance = this; + if (!CollectionDockingView.Instance.props.Document.currentFilter) CurrentUserUtils.setupFilterDocs(CollectionDockingView.Instance.props.Document); } public static LayoutString(fieldKey: string) { return FieldView.LayoutString(FilterBox, fieldKey); } public _filterBoolean = "AND"; - public _filterScope = "Current Dashboard"; + public static _filterScope = "Current Dashboard"; public _filterSelected = false; public _filterMatch = "matched"; - private myFiltersRef = React.createRef(); + // private myFiltersRef = React.createRef(); + + @observable private showFilterDialog = false; @computed get allDocs() { const allDocs = new Set(); @@ -112,10 +120,12 @@ export class FilterBox extends ViewBoxBaseComponent { + public removeFilter = (filterName: string) => { console.log("remove filter"); - const targetDoc = SelectionManager.Views()[0].Document; // CollectionDockingView.Instance.props.Document; - const filterDoc = Doc.UserDoc().currentFilter as any as Doc; + const targetDoc = FilterBox._filterScope === "Current Collection" ? SelectionManager.Views()[0].Document || CollectionDockingView.Instance.props.Document : CollectionDockingView.Instance.props.Document; + // const targetDoc = SelectionManager.Views()[0].props.Document; + // const targetDoc = SelectionManager.Views()[0].Document; // CollectionDockingView.Instance.props.Document; + const filterDoc = targetDoc.currentFilter as Doc; const attributes = DocListCast(filterDoc["data"]); const found = attributes.findIndex(doc => doc.title === filterName); if (found !== -1) { @@ -145,7 +155,8 @@ export class FilterBox extends ViewBoxBaseComponent doc.title === facetHeader); if (found !== -1) { // (this.dataDoc[this.props.fieldKey] as List).splice(found, 1); @@ -164,7 +175,7 @@ export class FilterBox extends ViewBoxBaseComponent; - if (facetHeader === "text" || facetValues.rtFields / allCollectionDocs.length > 0.1) { + if (facetHeader === "text") {//} || facetValues.rtFields / allCollectionDocs.length > 0.1) { newFacet = Docs.Create.TextDocument("", { _width: 100, _height: 25, system: true, _stayInCollection: true, _hideContextMenu: true, treeViewExpandedView: "layout", title: facetHeader, treeViewOpen: true, forceActive: true, ignoreClick: true }); Doc.GetProto(newFacet).type = DocumentType.COL; // forces item to show an open/close button instead ofa checkbox newFacet._textBoxPadding = 4; @@ -225,8 +236,8 @@ export class FilterBox extends ViewBoxBaseComponent { - this._filterScope = e.currentTarget.value; - console.log(this._filterScope); + FilterBox._filterScope = e.currentTarget.value; + console.log(FilterBox._filterScope); } @action @@ -234,14 +245,9 @@ export class FilterBox extends ViewBoxBaseComponent { + changeSelected = () => { if (this._filterSelected) { this._filterSelected = false; SelectionManager.DeselectAll(); @@ -252,12 +258,6 @@ export class FilterBox extends ViewBoxBaseComponent { - Doc.AddDocToList(Doc.UserDoc(), "savedFilters", this.props.Document); - console.log("saved filter"); - console.log(Doc.UserDoc().savedFilters); - } - FilteringStyleProvider(doc: Opt, props: Opt, property: string) { switch (property.split(":")[0]) { case StyleProp.Decorations: @@ -270,7 +270,7 @@ export class FilterBox extends ViewBoxBaseComponentIs Not
-
FilterBox.removeFilter(StrCast(doc.title))}> +
this.removeFilter(StrCast(doc.title))}>
; @@ -280,45 +280,47 @@ export class FilterBox extends ViewBoxBaseComponent ScriptField.MakeScript("")!; + + saveFilter = () => { + // const doc: Doc = new Doc; + // for (const key of Object.keys(this.props.Document)) { + // doc[key] = SerializationHelper.Serialize(this.props.Document[key] as Field); + // } + // console.log(doc); + runInAction(() => this.showFilterDialog = true); + console.log("saved filter"); + } + + onTitleValueChange = (e: React.ChangeEvent) => { + this.props.Document.title = e.currentTarget.value || `FilterDoc for ${SelectionManager.Views()[0].Document.title}`; + } + + onKeyDown = (e: React.KeyboardEvent) => { + if (e.key === "Enter") { + runInAction(() => this.showFilterDialog = false); + Doc.AddDocToList(Doc.UserDoc(), "savedFilters", this.props.Document); + } + } + render() { const facetCollection = this.props.Document; - // const flyout =
e.stopPropagation()}> - // {this._allFacets.map(facet => )} - //
; - - // const attributes = this.activeAttributes; - - // const options = this._allFacets.filter(facet => !attributes.some(attribute => attribute.title === facet)).map(facet => ({ value: facet, label: facet })); - // const options = this._allFacets.map(facet => ({ value: facet, label: facet })); - // console.log(this.props.Document); - // console.log(Doc.UserDoc().currentFilter); - console.log(this.yPos); - console.log(this.myFiltersRef.current?.getBoundingClientRect()); - - const flyout = <> -
e.stopPropagation()}> - testing flyout -
- ; - const options = this._allFacets.filter(facet => this.currentFacets.indexOf(facet) === -1).map(facet => ({ value: facet, label: facet })); - return this.props.dontRegisterView ? (null) :
+ const flyout = DocListCast(Doc.UserDoc().savedFilters).map(doc => { + // console.log("mapping"); + return <> +
e.stopPropagation()} style={{ height: 50, border: "2px" }} onPointerDown={() => this.props.myFiltersCallback?.(doc)}> + {StrCast(doc.title)} +
+ ; + } + ); - {/*
*/} - {/*
- -
+ const options = this._allFacets.filter(facet => this.currentFacets.indexOf(facet) === -1).map(facet => ({ value: facet, label: facet })); -
- Choose Filters -
*/} + return this.props.dontRegisterView ? (null) :
+
Current FilterDoc: {this.props.Document.title}
this.changeScope(e)}> - - - + + {/* */} +
- {/*
-
Scope:
- -
*/} - {/*
*/} +
+ this.facetClick((val as UserOptions).value)} - value={null} - closeMenuOnSelect={false} - /> -
-
this.changeSelected(e)} /> + onChange={this.changeSelected} />
select
+ }
; } diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts index 5e9ab4baa..9b539d1b7 100644 --- a/src/fields/Doc.ts +++ b/src/fields/Doc.ts @@ -25,6 +25,7 @@ import { Cast, FieldValue, NumCast, StrCast, ToConstructor } from "./Types"; import { AudioField, ImageField, PdfField, VideoField, WebField } from "./URLField"; import { deleteProperty, GetEffectiveAcl, getField, getter, makeEditable, makeReadOnly, normalizeEmail, setter, SharingPermissions, updateFunction } from "./util"; import JSZip = require("jszip"); +import { FilterBox } from "../client/views/nodes/FilterBox"; export namespace Field { export function toKeyValueString(doc: Doc, key: string): string { @@ -1063,9 +1064,8 @@ export namespace Doc { // all documents with the specified value for the specified key are included/excluded // based on the modifiers :"check", "x", undefined export function setDocFilter(target: Opt, key: string, value: any, modifiers?: "remove" | "match" | "check" | "x" | undefined) { - // console.log(key, value, modifiers); - const container = target ?? CollectionDockingView.Instance.props.Document; - const docFilters = Cast(container._docFilters, listSpec("string"), []); + const container = target ?? FilterBox._filterScope === "Current Collection" ? SelectionManager.Views()[0].Document || CollectionDockingView.Instance.props.Document : CollectionDockingView.Instance.props.Document; + const docFilters = Cast(SelectionManager.Views()[0].Document._docFilters, listSpec("string"), []); runInAction(() => { for (let i = 0; i < docFilters.length; i++) { const fields = docFilters[i].split(":"); // split key:value:modifier -- cgit v1.2.3-70-g09d2