diff options
| -rw-r--r-- | src/client/views/collections/CollectionSchemaView.scss | 91 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionSchemaView.tsx | 42 | ||||
| -rw-r--r-- | src/fields/Document.ts | 5 |
3 files changed, 108 insertions, 30 deletions
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<HTMLDivElement>(); private DIVIDER_WIDTH = 5; + @observable _columns: Array<Key> = [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<Document>): Set<Key> => { + let keys = new Set(); + docs.forEach(doc => { + let fields: ObservableMap<string, { key: Key, field: Field }> = 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<Document>(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 { <div className="collectionSchemaView-previewHandle" onPointerDown={this.onExpanderDown} />); let dividerDragger = this._splitPercentage == 100 ? (null) : <div className="collectionSchemaView-dividerDragger" onPointerDown={this.onDividerDown} style={{ width: `${this.DIVIDER_WIDTH}px` }} /> + return ( <div className="collectionSchemaView-container" onPointerDown={this.onPointerDown} ref={this._mainCont} style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }} > <div className="collectionSchemaView-dropTarget" onDrop={(e: React.DragEvent) => this.onDrop(e, {})} ref={this.createDropTarget}> @@ -231,6 +258,16 @@ export class CollectionSchemaView extends CollectionViewBase { }} getTrProps={this.getTrProps} /> + <div className="collectionSchemaView-addColumn" > + <input type="checkbox" id="addColumn-toggle" /> + <label htmlFor="addColumn-toggle" title="Add Column"><p>+</p></label> + + <div className="addColumn-options"> + <ul>{Array.from(this.findAllDocumentKeys(children)).map(item => { + return <li onClick={() => this.addColumn(item)}>{item.Name}</li> + })}</ul> + </div> + </div> </div> } </Measure> @@ -239,6 +276,7 @@ export class CollectionSchemaView extends CollectionViewBase { {content} </div> {previewHandle} + </div> </div > ) 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, "<untitled>"); } + @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 |