From 44d669b46616e561aef874471d2740a4f205d9f0 Mon Sep 17 00:00:00 2001 From: Fawn Date: Mon, 11 Mar 2019 21:25:13 -0400 Subject: column adding works, but render doesn't get called on add --- .../views/collections/CollectionSchemaView.scss | 91 +++++++++++++++------- .../views/collections/CollectionSchemaView.tsx | 42 +++++++++- src/fields/Document.ts | 5 ++ 3 files changed, 108 insertions(+), 30 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index d40e6d314..38da3505e 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -1,5 +1,3 @@ - - .collectionSchemaView-container { border-style: solid; box-sizing: border-box; @@ -7,36 +5,74 @@ width: 100%; height: 100%; .collectionSchemaView-previewRegion { - position: relative; - background: black; - float: left; + position: relative; + background: black; + float: left; height: 100%; } .collectionSchemaView-previewHandle { position: absolute; height: 37px; - width: 20px; - z-index: 20; - right: 0; - top: 0; - background: Black ; - } - .collectionSchemaView-dividerDragger{ - position: relative; - background: black; - float: left; + width: 20px; + z-index: 20; + right: 0; + top: 0; + background: Black; + } + .collectionSchemaView-dividerDragger { + position: relative; + background: black; + float: left; height: 100%; } .collectionSchemaView-tableContainer { position: relative; float: left; - height: 100%; + height: 100%; } - - .ReactTable { + .collectionSchemaView-addColumn { position: absolute; - // display: inline-block; - // overflow: auto; + z-index: 20px; + right: 10px; + bottom: 10px; + input { + display: none; + } + label { + background: red; + display: inline-block; + border-radius: 18px; + font-size: 25px; + width: 36px; + height: 36px; + margin-right: 10px; + text-align: center; + cursor: pointer; + } + input:not(:checked)~.addColumn-options { + display: none; + } + .addColumn-options { + position: absolute; + right: 70px; + bottom: 0; + width: 150px; + background-color: white; + ul { + padding: 0; + margin: 0; + } + li { + padding: 6px; + border: 1px solid gray; + width: 100%; + margin: 0; + } + } + } + .ReactTable { + position: absolute; // display: inline-block; + // overflow: auto; width: 100%; height: 100%; background: white; @@ -45,10 +81,8 @@ overflow-y: auto; overflow-x: auto; height: 100%; - display: -webkit-inline-box; - direction: ltr; - // direction:rtl; + direction: ltr; // direction:rtl; // display:block; } .rt-tbody { @@ -63,8 +97,8 @@ border-width: 1; border-right-color: #aaa; .imageBox-cont { - position:relative; - max-height:100%; + position: relative; + max-height: 100%; } .imageBox-cont img { object-fit: contain; @@ -78,9 +112,10 @@ } } .ReactTable .rt-thead.-header { - background:grey; - } - .ReactTable .rt-th, .ReactTable .rt-td { + background: grey; + } + .ReactTable .rt-th, + .ReactTable .rt-td { max-height: 44; padding: 3px 7px; } diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 04f017378..e1036e9b0 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -1,5 +1,5 @@ import React = require("react") -import { action, observable } from "mobx"; +import { action, observable, ObservableMap, runInAction } from "mobx"; import { observer } from "mobx-react"; import Measure from "react-measure"; import ReactTable, { CellInfo, ComponentPropsGetterR, ReactTableDefaults } from "react-table"; @@ -17,6 +17,8 @@ import "./CollectionSchemaView.scss"; import { COLLECTION_BORDER_WIDTH } from "./CollectionView"; import { CollectionViewBase } from "./CollectionViewBase"; import { setupDrag } from "../../util/DragManager"; +import { Key } from "./../../../fields/Key"; + // bcz: need to add drag and drop of rows and columns. This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657 @@ -26,6 +28,7 @@ export class CollectionSchemaView extends CollectionViewBase { private _mainCont = React.createRef(); private DIVIDER_WIDTH = 5; + @observable _columns: Array = [KeyStore.Title, KeyStore.Data, KeyStore.Author]; @observable _contentScaling = 1; // used to transfer the dimensions of the content pane in the DOM to the ContentScaling prop of the DocumentView @observable _dividerX = 0; @observable _panelWidth = 0; @@ -102,6 +105,29 @@ export class CollectionSchemaView extends CollectionViewBase { }; } + @action + addColumn = (k: Key): void => { + this._columns.push(k); + console.log("adding", this._columns.length); + } + + findAllDocumentKeys = (docs: Array): Set => { + let keys = new Set(); + docs.forEach(doc => { + let fields: ObservableMap = doc.Fields; + Array.from(fields).map(item => { + let v: { key: Key, field: Field } = item[1]; + let k = v.key; + keys.add(k); + }) + }) + keys.delete(KeyStore.Title); + keys.delete(KeyStore.Data); + keys.delete(KeyStore.Author); + console.log("key set", keys); + return keys; + } + _startSplitPercent = 0; @action onDividerMove = (e: PointerEvent): void => { @@ -179,7 +205,7 @@ export class CollectionSchemaView extends CollectionViewBase { focusDocument = (doc: Document) => { } render() { - const columns = this.props.Document.GetList(KeyStore.ColumnsKey, [KeyStore.Title, KeyStore.Data, KeyStore.Author]) + const columns = this.props.Document.GetList(KeyStore.ColumnsKey, this._columns) const children = this.props.Document.GetList(this.props.fieldKey, []); const selected = children.length > this._selectedIndex ? children[this._selectedIndex] : undefined; let content = this._selectedIndex == -1 || !selected ? (null) : ( @@ -205,6 +231,7 @@ export class CollectionSchemaView extends CollectionViewBase {
); let dividerDragger = this._splitPercentage == 100 ? (null) :
+ return (
this.onDrop(e, {})} ref={this.createDropTarget}> @@ -231,6 +258,16 @@ export class CollectionSchemaView extends CollectionViewBase { }} getTrProps={this.getTrProps} /> +
+ + + +
+
    {Array.from(this.findAllDocumentKeys(children)).map(item => { + return
  • this.addColumn(item)}>{item.Name}
    • + })}
+
+
} @@ -239,6 +276,7 @@ export class CollectionSchemaView extends CollectionViewBase { {content}
{previewHandle} +
) diff --git a/src/fields/Document.ts b/src/fields/Document.ts index 25e239417..6cf9c194e 100644 --- a/src/fields/Document.ts +++ b/src/fields/Document.ts @@ -38,6 +38,11 @@ export class Document extends Field { return this.GetText(KeyStore.Title, ""); } + @computed + public get Fields() { + return this.fields; + } + /** * Get the field in the document associated with the given key. If the * associated field has not yet been filled in from the server, a request -- cgit v1.2.3-70-g09d2 From 6cc582d85317c35908d313b4f129617073c5ccac Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Mon, 18 Mar 2019 03:37:22 -0400 Subject: Fixed columns, looks horrible though --- .../views/collections/CollectionSchemaView.scss | 2 +- .../views/collections/CollectionSchemaView.tsx | 90 ++++++++++++++++------ 2 files changed, 68 insertions(+), 24 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index 37f4652a9..8d3eba696 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -42,7 +42,7 @@ height: 100%; } .ReactTable { - position: absolute; // display: inline-block; + // position: absolute; // display: inline-block; // overflow: auto; width: 100%; height: 100%; diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 16432ebbc..654d13bf1 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -5,7 +5,7 @@ import Measure from "react-measure"; import ReactTable, { CellInfo, ComponentPropsGetterR, ReactTableDefaults } from "react-table"; import "react-table/react-table.css"; import { Document } from "../../../fields/Document"; -import { Field } from "../../../fields/Field"; +import { Field, Opt } from "../../../fields/Field"; import { KeyStore } from "../../../fields/KeyStore"; import { CompileScript, ToField } from "../../util/Scripting"; import { Transform } from "../../util/Transform"; @@ -18,11 +18,37 @@ import { COLLECTION_BORDER_WIDTH } from "./CollectionView"; import { CollectionViewBase } from "./CollectionViewBase"; import { setupDrag } from "../../util/DragManager"; import { Key } from "./../../../fields/Key"; +import { Server } from "../../Server"; +import { ListField } from "../../../fields/ListField"; // bcz: need to add drag and drop of rows and columns. This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657 +@observer +class KeyToggle extends React.Component<{ keyId: string, checked: boolean, toggle: (key: Key) => void }> { + @observable + key: Key | undefined; + + componentWillReceiveProps() { + Server.GetField(this.props.keyId, action((field: Opt) => { + if (field instanceof Key) { + this.key = field; + } + })) + } + + render() { + if (this.key) { + return (
+ this.key && this.props.toggle(this.key)} />{this.key.Name} +
) + } else { + return
+ } + } +} + @observer export class CollectionSchemaView extends CollectionViewBase { private _mainCont = React.createRef(); @@ -106,26 +132,40 @@ export class CollectionSchemaView extends CollectionViewBase { }; } + get columns() { + return this.props.Document.GetList(KeyStore.ColumnsKey, []); + } + @action - addColumn = (k: Key): void => { - this._columns.push(k); - console.log("adding", this._columns.length); + toggleKey = (key: Key) => { + this.props.Document.GetOrCreateAsync>(KeyStore.ColumnsKey, ListField, + (field) => { + const index = field.Data.indexOf(key); + if (index === -1) { + this.columns.push(key); + } else { + this.columns.splice(index, 1); + } + + }) } - findAllDocumentKeys = (docs: Array): Set => { - let keys = new Set(); + @observable keys: Key[] = []; + + findAllDocumentKeys = (): { [id: string]: boolean } => { + const docs = this.props.Document.GetList(this.props.fieldKey, []); + let keys: { [id: string]: boolean } = {} docs.forEach(doc => { - let fields: ObservableMap = doc.Fields; - Array.from(fields).map(item => { - let v: { key: Key, field: Field } = item[1]; - let k = v.key; - keys.add(k); - }) + let protos = doc.GetAllPrototypes(); + for (const proto of protos) { + proto._proxies.forEach((val: any, key: string) => { + keys[key] = false + }) + } + }) + this.columns.forEach(key => { + keys[key.Id] = true; }) - keys.delete(KeyStore.Title); - keys.delete(KeyStore.Data); - keys.delete(KeyStore.Author); - console.log("key set", keys); return keys; } @@ -206,9 +246,10 @@ export class CollectionSchemaView extends CollectionViewBase { focusDocument = (doc: Document) => { } render() { - const columns = this.props.Document.GetList(KeyStore.ColumnsKey, this._columns) + const columns = this.columns; const children = this.props.Document.GetList(this.props.fieldKey, []); const selected = children.length > this._selectedIndex ? children[this._selectedIndex] : undefined; + const allKeys = this.findAllDocumentKeys(); let content = this._selectedIndex == -1 || !selected ? (null) : ( {({ measureRef }) => @@ -259,15 +300,18 @@ export class CollectionSchemaView extends CollectionViewBase { }} getTrProps={this.getTrProps} + style={{ height: "50%" }} /> -
- - +
+ {/* + */}
-
    {Array.from(this.findAllDocumentKeys(children)).map(item => { - return
  • this.addColumn(item)}>{item.Name}
    • - })}
+
    + {Array.from(Object.keys(allKeys)).map(item => { + return () + })} +
-- cgit v1.2.3-70-g09d2 From da576c10538c025f247a50ed8561b112f78f828e Mon Sep 17 00:00:00 2001 From: bob Date: Mon, 18 Mar 2019 14:02:21 -0400 Subject: added column dividers --- .../views/collections/CollectionSchemaView.scss | 17 ++++ .../views/collections/CollectionSchemaView.tsx | 90 ++++++++++++++++------ 2 files changed, 84 insertions(+), 23 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index 8d3eba696..863bb256a 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -28,6 +28,23 @@ top: 0; background: $main-accent; } + .collectionSchemaView-columnsHandle { + position: absolute; + height: 37px; + width: 20px; + z-index: 20; + left: 0; + bottom: 0; + background: $main-accent; + } + .collectionSchemaView-colDividerDragger { + position: relative; + box-sizing: border-box; + border-top: 1px solid $intermediate-color; + border-bottom: 1px solid $intermediate-color; + float: top; + width: 100%; + } .collectionSchemaView-dividerDragger { position: relative; box-sizing: border-box; diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 654d13bf1..76ee421d6 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -60,6 +60,7 @@ export class CollectionSchemaView extends CollectionViewBase { @observable _panelWidth = 0; @observable _panelHeight = 0; @observable _selectedIndex = 0; + @observable _columnsPercentage = 0; @computed get splitPercentage() { return this.props.Document.GetNumber(KeyStore.SchemaSplitPercentage, 0); } renderCell = (rowProps: CellInfo) => { @@ -190,6 +191,25 @@ export class CollectionSchemaView extends CollectionViewBase { document.addEventListener("pointermove", this.onDividerMove); document.addEventListener('pointerup', this.onDividerUp); } + + + @action + onColDividerMove = (e: PointerEvent): void => { + let nativeWidth = this._mainCont.current!.getBoundingClientRect(); + this._columnsPercentage = 100 - (e.clientY - nativeWidth.top) / nativeWidth.height * 100; + } + @action + onColDividerUp = (e: PointerEvent): void => { + document.removeEventListener("pointermove", this.onColDividerMove); + document.removeEventListener('pointerup', this.onColDividerUp); + } + onColDividerDown = (e: React.PointerEvent) => { + e.stopPropagation(); + e.preventDefault(); + document.addEventListener("pointermove", this.onColDividerMove); + document.addEventListener('pointerup', this.onColDividerUp); + } + @action onExpanderMove = (e: PointerEvent): void => { e.stopPropagation(); @@ -201,12 +221,8 @@ export class CollectionSchemaView extends CollectionViewBase { e.preventDefault(); document.removeEventListener("pointermove", this.onExpanderMove); document.removeEventListener('pointerup', this.onExpanderUp); - if (this._startSplitPercent == this.splitPercentage) { - this.props.Document.SetNumber(KeyStore.SchemaSplitPercentage, this.splitPercentage == 0 ? 33 : 0); - } } onExpanderDown = (e: React.PointerEvent) => { - this._startSplitPercent = this.splitPercentage; e.stopPropagation(); e.preventDefault(); document.addEventListener("pointermove", this.onExpanderMove); @@ -227,6 +243,27 @@ export class CollectionSchemaView extends CollectionViewBase { } } + @action + onColumnsMove = (e: PointerEvent): void => { + e.stopPropagation(); + e.preventDefault(); + } + @action + onColumnsUp = (e: PointerEvent): void => { + e.stopPropagation(); + e.preventDefault(); + document.removeEventListener("pointermove", this.onColumnsMove); + document.removeEventListener('pointerup', this.onColumnsUp); + this._columnsPercentage = this._columnsPercentage ? 0 : 50; + } + onColumnsDown = (e: React.PointerEvent) => { + this._startSplitPercent = this.splitPercentage; + e.stopPropagation(); + e.preventDefault(); + document.addEventListener("pointermove", this.onColumnsMove); + document.addEventListener('pointerup', this.onColumnsUp); + } + @action setScaling = (r: any) => { const children = this.props.Document.GetList(this.props.fieldKey, []); @@ -271,8 +308,12 @@ export class CollectionSchemaView extends CollectionViewBase { ) let previewHandle = !this.props.active() ? (null) : (
); + let columnsHandle = !this.props.active() ? (null) : ( +
); let dividerDragger = this.splitPercentage == 0 ? (null) :
+ let colDividerDragger = this._columnsPercentage == 0 ? (null) : +
return (
@@ -284,30 +325,32 @@ export class CollectionSchemaView extends CollectionViewBase { {({ measureRef }) =>
- ({ - Header: col.Name, - accessor: (doc: Document) => [doc, col], - id: col.Id - }))} - column={{ - ...ReactTableDefaults.column, - Cell: this.renderCell, +
+ ({ + Header: col.Name, + accessor: (doc: Document) => [doc, col], + id: col.Id + }))} + column={{ + ...ReactTableDefaults.column, + Cell: this.renderCell, - }} - getTrProps={this.getTrProps} - style={{ height: "50%" }} - /> -
+ }} + getTrProps={this.getTrProps} + /> +
+ {colDividerDragger} +
{/* */}
-
    +
      {Array.from(Object.keys(allKeys)).map(item => { return () })} @@ -322,6 +365,7 @@ export class CollectionSchemaView extends CollectionViewBase { {content}
{previewHandle} + {columnsHandle}
-- cgit v1.2.3-70-g09d2 From 1ae0ba5addbcf3d527f1e75cc895aaf023063a7d Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Mon, 18 Mar 2019 14:05:37 -0400 Subject: Cleaned up field view --- src/client/views/nodes/FieldView.tsx | 19 ++++++++++++++----- src/fields/Document.ts | 1 + 2 files changed, 15 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index 49f4cefce..e84c5f933 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -16,6 +16,7 @@ import { WebBox } from "./WebBox"; import { VideoBox } from "./VideoBox"; import { AudioBox } from "./AudioBox"; import { AudioField } from "../../../fields/AudioField"; +import { ListField } from "../../../fields/ListField"; // @@ -60,12 +61,20 @@ export class FieldView extends React.Component { } else if (field instanceof WebField) { return - } - else if (field instanceof VideoField){ - return } - else if (field instanceof AudioField){ - return + else if (field instanceof VideoField) { + return + } + else if (field instanceof AudioField) { + return + } else if (field instanceof Document) { + return
{field.Title}
+ } else if (field instanceof ListField) { + return (
+ {(field as ListField).Data.map(f => { + return f instanceof Document ? f.Title : f.GetValue().toString(); + }).join(", ")} +
) } // bcz: this belongs here, but it doesn't render well so taking it out for now // else if (field instanceof HtmlField) { diff --git a/src/fields/Document.ts b/src/fields/Document.ts index 5f0889786..be0137128 100644 --- a/src/fields/Document.ts +++ b/src/fields/Document.ts @@ -310,6 +310,7 @@ export class Document extends Field { throw new Error("Method not implemented."); } GetValue() { + return this.Title; var title = (this._proxies.has(KeyStore.Title.Id) ? "???" : this.Title) + "(" + this.Id + ")"; return title; //throw new Error("Method not implemented."); -- cgit v1.2.3-70-g09d2