aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/documents/Documents.ts2
-rw-r--r--src/client/views/EditableView.tsx4
-rw-r--r--src/client/views/collections/CollectionSchemaCells.tsx502
-rw-r--r--src/client/views/collections/CollectionSchemaHeaders.tsx33
-rw-r--r--src/client/views/collections/CollectionSchemaMovableTableHOC.tsx2
-rw-r--r--src/client/views/collections/CollectionSchemaView.scss64
-rw-r--r--src/client/views/collections/CollectionSchemaView.tsx1033
7 files changed, 1570 insertions, 70 deletions
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 6c2c6faea..3dee873f3 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -397,7 +397,7 @@ export namespace Docs {
// synthesize the default options, the type and title from computed values and
// whatever options pertain to this specific prototype
const options = { title, type, baseProto: true, ...defaultOptions, ...(template.options || {}) };
- options.layout = layout.view.LayoutString(layout.dataField);
+ options.layout = layout.view?.LayoutString(layout.dataField);
const doc = Doc.assign(new Doc(prototypeId, true), { layoutKey: "layout", ...options });
doc.layout_keyValue = KeyValueBox.LayoutString("");
return doc;
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index ee3ce1cf3..afe9321f4 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -172,7 +172,8 @@ export class EditableView extends React.Component<EditableProps> {
onChange: this.props.autosuggestProps.onChange
}}
/>
- : <input className="editableView-input"
+ :
+ <input className="editableView-input"
defaultValue={this.props.GetValue()}
onKeyDown={this.onKeyDown}
autoFocus={true}
@@ -188,7 +189,6 @@ export class EditableView extends React.Component<EditableProps> {
ref={this._ref}
style={{ display: this.props.display, minHeight: "20px", height: `${this.props.height ? this.props.height : "auto"}`, maxHeight: `${this.props.maxHeight}` }}
onClick={this.onClick} placeholder={this.props.placeholder}>
-
<span style={{ fontStyle: this.props.fontStyle, fontSize: this.props.fontSize, color: this.props.contents ? "black" : "grey" }}>{this.props.contents ? this.props.contents?.valueOf() : this.props.placeholder?.valueOf()}</span>
</div>
);
diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx
index 2b8110e27..593962e73 100644
--- a/src/client/views/collections/CollectionSchemaCells.tsx
+++ b/src/client/views/collections/CollectionSchemaCells.tsx
@@ -1,21 +1,21 @@
import React = require("react");
-import { action, observable, trace } from "mobx";
+import { action, observable, trace, computed } from "mobx";
import { observer } from "mobx-react";
import { CellInfo } from "react-table";
import "react-table/react-table.css";
-import { emptyFunction, returnFalse, returnZero, returnOne, returnEmptyFilter } from "../../../Utils";
+import { emptyFunction, returnFalse, returnZero, returnOne, returnEmptyFilter, Utils, emptyPath } from "../../../Utils";
import { Doc, DocListCast, Field, Opt } from "../../../fields/Doc";
import { Id } from "../../../fields/FieldSymbols";
import { KeyCodes } from "../../util/KeyCodes";
import { SetupDrag, DragManager } from "../../util/DragManager";
import { CompileScript } from "../../util/Scripting";
import { Transform } from "../../util/Transform";
-import { MAX_ROW_HEIGHT } from '../globalCssVariables.scss';
+import { MAX_ROW_HEIGHT, COLLECTION_BORDER_WIDTH } from '../globalCssVariables.scss';
import '../DocumentDecorations.scss';
import { EditableView } from "../EditableView";
import { FieldView, FieldViewProps } from "../nodes/FieldView";
import "./CollectionSchemaView.scss";
-import { CollectionView } from "./CollectionView";
+import { CollectionView, Flyout } from "./CollectionView";
import { NumCast, StrCast, BoolCast, FieldValue, Cast } from "../../../fields/Types";
import { Docs } from "../../documents/Documents";
import { library } from '@fortawesome/fontawesome-svg-core';
@@ -24,6 +24,15 @@ import { SchemaHeaderField } from "../../../fields/SchemaHeaderField";
import { undoBatch } from "../../util/UndoManager";
import { SnappingManager } from "../../util/SnappingManager";
import { ComputedField } from "../../../fields/ScriptField";
+import { ImageField } from "../../../fields/URLField";
+import { List } from "../../../fields/List";
+import { LinkBox } from "../nodes/LinkBox";
+import { OverlayView } from "../OverlayView";
+import { DocumentIconContainer } from "../nodes/DocumentIcon";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView";
+import ReactDOM from "react-dom";
+const path = require('path');
library.add(faExpand);
@@ -47,6 +56,7 @@ export interface CellProps {
setPreviewDoc: (doc: Doc) => void;
setComputed: (script: string, doc: Doc, field: string, row: number, col: number) => boolean;
getField: (row: number, col?: number) => void;
+ showDoc: (doc: Doc | undefined, dataDoc?: any, screenX?: number, screenY?: number) => void;
}
@observer
@@ -54,7 +64,7 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
@observable protected _isEditing: boolean = false;
protected _focusRef = React.createRef<HTMLDivElement>();
protected _document = this.props.rowProps.original;
- private _dropDisposer?: DragManager.DragDropDisposer;
+ protected _dropDisposer?: DragManager.DragDropDisposer;
componentDidMount() {
document.addEventListener("keydown", this.onKeyDown);
@@ -84,6 +94,7 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
@action
onPointerDown = async (e: React.PointerEvent): Promise<void> => {
+
this.props.changeFocusedCellByIndex(this.props.row, this.props.col);
this.props.setPreviewDoc(this.props.rowProps.original);
@@ -129,7 +140,7 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
}
}
- private dropRef = (ele: HTMLElement | null) => {
+ protected dropRef = (ele: HTMLElement | null) => {
this._dropDisposer && this._dropDisposer();
if (ele) {
this._dropDisposer = DragManager.MakeDropTarget(ele, this.drop.bind(this));
@@ -206,6 +217,15 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
const doc = FieldValue(Cast(field, Doc));
contents = typeof field === "object" ? doc ? StrCast(doc.title) === "" ? "--" : StrCast(doc.title) : `--${typeof field}--` : `--${typeof field}--`;
}
+ if (type === "image") {
+ const image = FieldValue(Cast(field, ImageField));
+ const doc = FieldValue(Cast(field, Doc));
+ contents = typeof field === "object" ? doc ? StrCast(doc.title) === "" ? "--" : StrCast(doc.title) : `--${typeof field}--` : `--${typeof field}--`;
+ }
+ if (type === "list") {
+ contents = typeof field === "object" ? doc ? StrCast(field) === "" ? "--" : StrCast(field) : `--${typeof field}--` : `--${typeof field}--`;
+ }
+
let className = "collectionSchemaView-cellWrapper";
if (this._isEditing) className += " editing";
@@ -220,40 +240,60 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
// );
trace();
+
+
return (
<div className="collectionSchemaView-cellContainer" style={{ cursor: fieldIsDoc ? "grab" : "auto" }} ref={dragRef} onPointerDown={this.onPointerDown} onPointerEnter={onPointerEnter} onPointerLeave={onPointerLeave}>
<div className={className} ref={this._focusRef} onPointerDown={onItemDown} tabIndex={-1}>
<div className="collectionSchemaView-cellContents" ref={type === undefined || type === "document" ? this.dropRef : null} key={props.Document[Id]}>
+
+
<EditableView
editing={this._isEditing}
isEditingCallback={this.isEditingCallback}
display={"inline"}
- contents={contents}
+ contents={contents ? contents : type === "number" ? "0" : "undefined"}
+ //contents={StrCast(contents)}
height={"auto"}
maxHeight={Number(MAX_ROW_HEIGHT)}
+ placeholder={"enter value"}
GetValue={() => {
- const cfield = ComputedField.WithoutComputed(() => FieldValue(props.Document[props.fieldKey]));
- const cscript = cfield instanceof ComputedField ? cfield.script.originalScript : undefined;
- const cfinalScript = cscript?.split("return")[cscript.split("return").length - 1];
- const val = cscript !== undefined ? `:=${cfinalScript?.substring(0, cfinalScript.length - 2)}` :
- Field.IsField(cfield) ? Field.toScriptString(cfield) : "";
- return val;
+ if (type === "number" && (contents === 0 || contents === "0")) {
+ return "0";
+ } else {
+ const cfield = ComputedField.WithoutComputed(() => FieldValue(props.Document[props.fieldKey]));
+ console.log(cfield);
+ if (type === "number") {
+ return StrCast(cfield);
+ }
+ const cscript = cfield instanceof ComputedField ? cfield.script.originalScript : undefined;
+ const cfinalScript = cscript?.split("return")[cscript.split("return").length - 1];
+ const val = cscript !== undefined ? `:=${cfinalScript?.substring(0, cfinalScript.length - 2)}` :
+ Field.IsField(cfield) ? Field.toScriptString(cfield) : "";
+ return val;
+ }
+
}}
SetValue={action((value: string) => {
let retVal = false;
+
if (value.startsWith(":=")) {
retVal = this.props.setComputed(value.substring(2), props.Document, this.props.rowProps.column.id!, this.props.row, this.props.col);
} else {
const script = CompileScript(value, { requiredType: type, typecheck: false, editable: true, addReturn: true, params: { this: Doc.name, $r: "number", $c: "number", $: "any" } });
if (script.compiled) {
retVal = this.applyToDoc(props.Document, this.props.row, this.props.col, script.run);
+ console.log("compiled");
}
+
}
if (retVal) {
this._isEditing = false; // need to set this here. otherwise, the assignment of the field will invalidate & cause render() to be called with the wrong value for 'editing'
this.props.setIsEditing(false);
}
return retVal;
+
+ //return true;
})}
OnFillDown={async (value: string) => {
const script = CompileScript(value, { requiredType: type, typecheck: false, editable: true, addReturn: true, params: { this: Doc.name, $r: "number", $c: "number", $: "any" } });
@@ -265,6 +305,8 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
}
}}
/>
+
+
</div >
{/* {fieldIsDoc ? docExpander : null} */}
</div>
@@ -300,12 +342,444 @@ export class CollectionSchemaStringCell extends CollectionSchemaCell {
@observer
export class CollectionSchemaDocCell extends CollectionSchemaCell {
+
+ _overlayDisposer?: () => void;
+
+ private prop: FieldViewProps = {
+ Document: this.props.rowProps.original,
+ DataDoc: this.props.rowProps.original,
+ LibraryPath: [],
+ dropAction: "alias",
+ bringToFront: emptyFunction,
+ rootSelected: returnFalse,
+ fieldKey: this.props.rowProps.column.id as string,
+ ContainingCollectionView: this.props.CollectionView,
+ ContainingCollectionDoc: this.props.CollectionView && this.props.CollectionView.props.Document,
+ isSelected: returnFalse,
+ select: emptyFunction,
+ renderDepth: this.props.renderDepth + 1,
+ ScreenToLocalTransform: Transform.Identity,
+ focus: emptyFunction,
+ active: returnFalse,
+ whenActiveChanged: emptyFunction,
+ PanelHeight: returnZero,
+ PanelWidth: returnZero,
+ NativeHeight: returnZero,
+ NativeWidth: returnZero,
+ addDocTab: this.props.addDocTab,
+ pinToPres: this.props.pinToPres,
+ ContentScaling: returnOne,
+ docFilters: returnEmptyFilter
+ };
+ @observable private _field = this.prop.Document[this.prop.fieldKey];
+ @observable private _doc = FieldValue(Cast(this._field, Doc));
+ @observable private _docTitle = this._doc?.title;
+ @observable private _preview = false;
+ @computed get previewWidth() { return () => NumCast(this.props.Document.schemaPreviewWidth); }
+ @computed get borderWidth() { return Number(COLLECTION_BORDER_WIDTH); }
+ @computed get tableWidth() { return this.prop.PanelWidth() - 2 * this.borderWidth - 4 - this.previewWidth(); }
+
+ @action
+ onSetValue = (value: string) => {
+ this._docTitle = value;
+ //this.prop.Document[this.prop.fieldKey] = this._text;
+
+ const script = CompileScript(value, {
+ addReturn: true,
+ typecheck: false,
+ transformer: DocumentIconContainer.getTransformer()
+ });
+
+ const results = script.compiled && script.run();
+ if (results && results.success) {
+
+ console.log(results.result);
+ this._doc = results.result;
+ this.prop.Document[this.prop.fieldKey] = results.result;
+ this.prop.Document[this.prop.fieldKey] = results.result;
+ this._docTitle = this._doc?.title;
+
+ return true;
+ }
+ return false;
+ }
+
+ onFocus = () => {
+ this._overlayDisposer?.();
+ this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 });
+ }
+
+ @action
+ onOpenClick = () => {
+ this._preview = false;
+ if (this._doc) {
+ this.prop.addDocTab(this._doc, "onRight");
+ return true;
+ }
+ return false;
+ }
+
+ @action
+ showPreview = (bool: boolean, e: any) => {
+ if (this._isEditing) {
+ this._preview = false;
+ } else {
+ if (bool) {
+ console.log("show doc");
+ this.props.showDoc(this._doc, this.prop.DataDoc, e.clientX, e.clientY);
+ } else {
+ console.log("no doc");
+ this.props.showDoc(undefined);
+ }
+ }
+ }
+
+ @action
+ isEditingCalling = (isEditing: boolean): void => {
+ this.showPreview(false, "");
+ document.removeEventListener("keydown", this.onKeyDown);
+ isEditing && document.addEventListener("keydown", this.onKeyDown);
+ this._isEditing = isEditing;
+ this.props.setIsEditing(isEditing);
+ this.props.changeFocusedCellByIndex(this.props.row, this.props.col);
+ }
+
+ onDown = (e: any) => {
+ this.props.changeFocusedCellByIndex(this.props.row, this.props.col);
+ this.props.setPreviewDoc(this.props.rowProps.original);
+
+ let url: string;
+ if (url = StrCast(this.props.rowProps.row.href)) {
+ try {
+ new URL(url);
+ const temp = window.open(url)!;
+ temp.blur();
+ window.focus();
+ } catch { }
+ }
+
+ const field = this.props.rowProps.original[this.props.rowProps.column.id!];
+ const doc = FieldValue(Cast(field, Doc));
+ if (typeof field === "object" && doc) this.props.setPreviewDoc(doc);
+
+ this.showPreview(true, e);
+
+ }
+
render() {
- return this.renderCellWithType("document");
+ if (typeof this._field === "object" && this._doc && this._docTitle) {
+ return (
+ <div className="collectionSchemaView-cellWrapper" ref={this._focusRef} tabIndex={-1}
+ onPointerDown={(e) => { this.onDown(e); }}
+ onPointerEnter={(e) => { this.showPreview(true, e); }}
+ onPointerLeave={(e) => { this.showPreview(false, e); }}
+ >
+
+ <div className="collectionSchemaView-cellContents-document"
+ style={{ padding: "5.9px" }}
+ ref={this.dropRef}
+ onFocus={this.onFocus}
+ onBlur={() => this._overlayDisposer?.()}
+ >
+
+ <EditableView
+ editing={this._isEditing}
+ isEditingCallback={this.isEditingCalling}
+ display={"inline"}
+ contents={this._docTitle}
+ height={"auto"}
+ maxHeight={Number(MAX_ROW_HEIGHT)}
+ GetValue={() => {
+ return StrCast(this._docTitle);
+ }}
+ SetValue={action((value: string) => {
+ this.onSetValue(value);
+ this.showPreview(false, "");
+ return true;
+ })}
+ />
+ </div >
+ <div onClick={this.onOpenClick} className="collectionSchemaView-cellContents-docButton">
+ <FontAwesomeIcon icon="external-link-alt" size="lg" ></FontAwesomeIcon> </div>
+ </div>
+ );
+ } else {
+ return this.renderCellWithType("document");
+ }
}
}
@observer
+export class CollectionSchemaImageCell extends CollectionSchemaCell {
+ // render() {
+ // return this.renderCellWithType("image");
+ // }
+
+ choosePath(url: URL, dataDoc: any) {
+ const lower = url.href.toLowerCase();
+ if (url.protocol === "data") {
+ return url.href;
+ } else if (url.href.indexOf(window.location.origin) === -1) {
+ return Utils.CorsProxy(url.href);
+ } else if (!/\.(png|jpg|jpeg|gif|webp)$/.test(lower)) {
+ return url.href;//Why is this here
+ }
+ const ext = path.extname(url.href);
+ const _curSuffix = "_o";
+ return url.href.replace(ext, _curSuffix + ext);
+ }
+
+ render() {
+ const props: FieldViewProps = {
+ Document: this.props.rowProps.original,
+ DataDoc: this.props.rowProps.original,
+ LibraryPath: [],
+ dropAction: "alias",
+ bringToFront: emptyFunction,
+ rootSelected: returnFalse,
+ fieldKey: this.props.rowProps.column.id as string,
+ ContainingCollectionView: this.props.CollectionView,
+ ContainingCollectionDoc: this.props.CollectionView && this.props.CollectionView.props.Document,
+ isSelected: returnFalse,
+ select: emptyFunction,
+ renderDepth: this.props.renderDepth + 1,
+ ScreenToLocalTransform: Transform.Identity,
+ focus: emptyFunction,
+ active: returnFalse,
+ whenActiveChanged: emptyFunction,
+ PanelHeight: returnZero,
+ PanelWidth: returnZero,
+ NativeHeight: returnZero,
+ NativeWidth: returnZero,
+ addDocTab: this.props.addDocTab,
+ pinToPres: this.props.pinToPres,
+ ContentScaling: returnOne,
+ docFilters: returnEmptyFilter
+ };
+
+ let image = true;
+ let url = [];
+ if (props.DataDoc) {
+ const field = Cast(props.DataDoc[props.fieldKey], ImageField, null); // retrieve the primary image URL that is being rendered from the data doc
+ const alts = DocListCast(props.DataDoc[props.fieldKey + "-alternates"]); // retrieve alternate documents that may be rendered as alternate images
+ const altpaths = alts.map(doc => Cast(doc[Doc.LayoutFieldKey(doc)], ImageField, null)?.url).filter(url => url).map(url => this.choosePath(url, props.DataDoc)); // access the primary layout data of the alternate documents
+ const paths = field ? [this.choosePath(field.url, props.DataDoc), ...altpaths] : altpaths;
+ if (paths.length) {
+ url = paths;
+ } else {
+ url = [Utils.CorsProxy("http://www.cs.brown.edu/~bcz/noImage.png")];
+ image = false;
+ }
+ //url = paths.length ? paths : [Utils.CorsProxy("http://www.cs.brown.edu/~bcz/noImage.png")];
+ } else {
+ url = [Utils.CorsProxy("http://www.cs.brown.edu/~bcz/noImage.png")];
+ image = false;
+ }
+
+ const heightToWidth = NumCast(props.DataDoc?._nativeHeight) / NumCast(props.DataDoc?._nativeWidth);
+ const height = this.props.rowProps.width * heightToWidth;
+
+ if (props.fieldKey === "data") {
+ if (url !== []) {
+ const reference = React.createRef<HTMLDivElement>();
+ return (
+ <div className="collectionSchemaView-cellWrapper" ref={this._focusRef} tabIndex={-1} onPointerDown={this.onPointerDown}>
+ <div className="collectionSchemaView-cellContents" key={this._document[Id]} ref={reference}>
+ <img src={url[0]} width={image ? this.props.rowProps.width : "30px"}
+ height={image ? height : "30px"} />
+ </div >
+ </div>
+ );
+
+ } else {
+ return this.renderCellWithType("image");
+ }
+ } else {
+ return this.renderCellWithType("image");
+ }
+ }
+}
+
+
+
+
+
+@observer
+export class CollectionSchemaListCell extends CollectionSchemaCell {
+
+ _overlayDisposer?: () => void;
+
+ private prop: FieldViewProps = {
+ Document: this.props.rowProps.original,
+ DataDoc: this.props.rowProps.original,
+ LibraryPath: [],
+ dropAction: "alias",
+ bringToFront: emptyFunction,
+ rootSelected: returnFalse,
+ fieldKey: this.props.rowProps.column.id as string,
+ ContainingCollectionView: this.props.CollectionView,
+ ContainingCollectionDoc: this.props.CollectionView && this.props.CollectionView.props.Document,
+ isSelected: returnFalse,
+ select: emptyFunction,
+ renderDepth: this.props.renderDepth + 1,
+ ScreenToLocalTransform: Transform.Identity,
+ focus: emptyFunction,
+ active: returnFalse,
+ whenActiveChanged: emptyFunction,
+ PanelHeight: returnZero,
+ PanelWidth: returnZero,
+ NativeHeight: returnZero,
+ NativeWidth: returnZero,
+ addDocTab: this.props.addDocTab,
+ pinToPres: this.props.pinToPres,
+ ContentScaling: returnOne,
+ docFilters: returnEmptyFilter
+ };
+ @observable private _field = this.prop.Document[this.prop.fieldKey];
+ @observable private _optionsList = this._field as List<any>;
+ @observable private _opened = false;
+ @observable private _text = "select an item";
+ @observable private _selectedNum = 0;
+
+ @action
+ toggleOpened(open: boolean) {
+ console.log("open: " + open);
+ this._opened = open;
+ }
+
+ // @action
+ // onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+ // this._text = e.target.value;
+
+ // // change if its a document
+ // this._optionsList[this._selectedNum] = this._text;
+ // }
+
+ @action
+ onSetValue = (value: string) => {
+
+
+ this._text = value;
+
+ // change if its a document
+ this._optionsList[this._selectedNum] = this._text;
+
+ (this.prop.Document[this.prop.fieldKey] as List<any>).splice(this._selectedNum, 1, value);
+
+ }
+
+ @action
+ onSelected = (element: string, index: number) => {
+ this._text = element;
+ this._selectedNum = index;
+ }
+
+ onFocus = () => {
+ this._overlayDisposer?.();
+ this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 });
+ }
+
+
+ render() {
+
+ const dragRef: React.RefObject<HTMLDivElement> = React.createRef();
+
+ let type = "list";
+
+ let link = false;
+ let doc = false;
+ const reference = React.createRef<HTMLDivElement>();
+
+ if (typeof this._field === "object" && this._optionsList[0]) {
+
+ const options = this._optionsList.map((element, index) => {
+
+ if (element instanceof Doc) {
+ doc = true;
+ type = "document";
+ if (this.prop.fieldKey.toLowerCase() === "links") {
+ link = true;
+ type = "link";
+ }
+ const document = FieldValue(Cast(element, Doc));
+ const title = element.title;
+ return <div
+ className="collectionSchemaView-dropdownOption"
+ onPointerDown={(e) => { this.onSelected(StrCast(element.title), index); }}
+ style={{ padding: "6px" }}>
+ {title}
+ </div>;
+
+ } else {
+ return <div
+ className="collectionSchemaView-dropdownOption"
+ onPointerDown={(e) => { this.onSelected(StrCast(element), index); }}
+ style={{ padding: "6px" }}>{element}</div>;
+ }
+ });
+
+ const plainText = <div style={{ padding: "5.9px" }}>{this._text}</div>;
+ // const textarea = <textarea onChange={this.onChange} value={this._text}
+ // onFocus={doc ? this.onFocus : undefined}
+ // onBlur={doc ? e => this._overlayDisposer?.() : undefined}
+ // style={{ resize: "none" }}
+ // placeholder={"select an item"}></textarea>;
+
+ const textarea = <div className="collectionSchemaView-cellContents"
+ style={{ padding: "5.9px" }}
+ ref={type === undefined || type === "document" ? this.dropRef : null} key={this.prop.Document[Id]}>
+ <EditableView
+ editing={this._isEditing}
+ isEditingCallback={this.isEditingCallback}
+ display={"inline"}
+ contents={this._text}
+ height={"auto"}
+ maxHeight={Number(MAX_ROW_HEIGHT)}
+ GetValue={() => {
+ return this._text;
+ }}
+ SetValue={action((value: string) => {
+
+ // add special for params
+ this.onSetValue(value);
+ return true;
+ })}
+ />
+ </div >;
+
+ //☰
+
+ const dropdown = <div>
+ {options}
+ </div>;
+
+ return (
+ <div className="collectionSchemaView-cellWrapper" ref={this._focusRef} tabIndex={-1} onPointerDown={this.onPointerDown}>
+ <div className="collectionSchemaView-cellContents" key={this._document[Id]} ref={reference}>
+ <div className="collectionSchemaView-dropDownWrapper">
+ <button type="button" className="collectionSchemaView-dropdownButton" onClick={(e) => { this.toggleOpened(!this._opened); }}
+ style={{ right: "length", position: "relative" }}>
+ {this._opened ? <FontAwesomeIcon icon="caret-up" size="lg" ></FontAwesomeIcon>
+ : <FontAwesomeIcon icon="caret-down" size="lg" ></FontAwesomeIcon>}
+ </button>
+ <div className="collectionSchemaView-dropdownText"> {link ? plainText : textarea} </div>
+ </div>
+
+ {this._opened ? dropdown : null}
+ </div >
+ </div>
+ );
+ } else {
+ return this.renderCellWithType("list");
+ }
+ }
+}
+
+
+
+
+
+@observer
export class CollectionSchemaCheckboxCell extends CollectionSchemaCell {
@observable private _isChecked: boolean = typeof this.props.rowProps.original[this.props.rowProps.column.id as string] === "boolean" ? BoolCast(this.props.rowProps.original[this.props.rowProps.column.id as string]) : false;
diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx
index dae0600b1..d9a27f355 100644
--- a/src/client/views/collections/CollectionSchemaHeaders.tsx
+++ b/src/client/views/collections/CollectionSchemaHeaders.tsx
@@ -2,7 +2,7 @@ import React = require("react");
import { action, observable } from "mobx";
import { observer } from "mobx-react";
import "./CollectionSchemaView.scss";
-import { faPlus, faFont, faHashtag, faAlignJustify, faCheckSquare, faToggleOn, faSortAmountDown, faSortAmountUp, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { faPlus, faFont, faHashtag, faAlignJustify, faCheckSquare, faToggleOn, faSortAmountDown, faSortAmountUp, faTimes, faImage, faListUl } from '@fortawesome/free-solid-svg-icons';
import { library, IconProp } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { ColumnType } from "./CollectionSchemaView";
@@ -13,7 +13,7 @@ const higflyout = require("@hig/flyout");
export const { anchorPoints } = higflyout;
export const Flyout = higflyout.default;
-library.add(faPlus, faFont, faHashtag, faAlignJustify, faCheckSquare, faToggleOn, faFile as any, faSortAmountDown, faSortAmountUp, faTimes);
+library.add(faPlus, faFont, faHashtag, faAlignJustify, faCheckSquare, faToggleOn, faFile as any, faSortAmountDown, faSortAmountUp, faTimes, faImage, faListUl);
export interface HeaderProps {
keyValue: SchemaHeaderField;
@@ -33,7 +33,8 @@ export interface HeaderProps {
export class CollectionSchemaHeader extends React.Component<HeaderProps> {
render() {
const icon: IconProp = this.props.keyType === ColumnType.Number ? "hashtag" : this.props.keyType === ColumnType.String ? "font" :
- this.props.keyType === ColumnType.Boolean ? "check-square" : this.props.keyType === ColumnType.Doc ? "file" : "align-justify";
+ this.props.keyType === ColumnType.Boolean ? "check-square" : this.props.keyType === ColumnType.Doc ? "file" :
+ this.props.keyType === ColumnType.Image ? "image" : this.props.keyType === ColumnType.List ? "list-ul" : "align-justify";
return (
<div className="collectionSchemaView-header" style={{ background: this.props.keyValue.color }}>
<CollectionSchemaColumnMenu
@@ -72,6 +73,16 @@ export class CollectionSchemaAddColumnHeader extends React.Component<AddColumnHe
}
}
+
+
+
+
+
+
+
+
+
+
export interface ColumnMenuProps {
columnField: SchemaHeaderField;
// keyValue: string;
@@ -160,10 +171,18 @@ export class CollectionSchemaColumnMenu extends React.Component<ColumnMenuProps>
<FontAwesomeIcon icon={"check-square"} size="sm" />
Checkbox
</div>
+ <div className={"columnMenu-option" + (type === ColumnType.List ? " active" : "")} onClick={() => this.changeColumnType(ColumnType.List)}>
+ <FontAwesomeIcon icon={"list-ul"} size="sm" />
+ List
+ </div>
<div className={"columnMenu-option" + (type === ColumnType.Doc ? " active" : "")} onClick={() => this.changeColumnType(ColumnType.Doc)}>
<FontAwesomeIcon icon={"file"} size="sm" />
Document
</div>
+ <div className={"columnMenu-option" + (type === ColumnType.Image ? " active" : "")} onClick={() => this.changeColumnType(ColumnType.Image)}>
+ <FontAwesomeIcon icon={"image"} size="sm" />
+ Image
+ </div>
</div>
</div >
);
@@ -258,7 +277,7 @@ export class CollectionSchemaColumnMenu extends React.Component<ColumnMenuProps>
}
-interface KeysDropdownProps {
+export interface KeysDropdownProps {
keyValue: string;
possibleKeys: string[];
existingKeys: string[];
@@ -268,7 +287,7 @@ interface KeysDropdownProps {
setIsEditing: (isEditing: boolean) => void;
}
@observer
-class KeysDropdown extends React.Component<KeysDropdownProps> {
+export class KeysDropdown extends React.Component<KeysDropdownProps> {
@observable private _key: string = this.props.keyValue;
@observable private _searchTerm: string = this.props.keyValue;
@observable private _isOpen: boolean = false;
@@ -331,7 +350,9 @@ class KeysDropdown extends React.Component<KeysDropdownProps> {
renderOptions = (): JSX.Element[] | JSX.Element => {
if (!this._isOpen) return <></>;
- const keyOptions = this._searchTerm === "" ? this.props.possibleKeys : this.props.possibleKeys.filter(key => key.toUpperCase().indexOf(this._searchTerm.toUpperCase()) > -1);
+ const searchTerm = this._searchTerm.trim() === "New field" ? "" : this._searchTerm;
+
+ const keyOptions = searchTerm === "" ? this.props.possibleKeys : this.props.possibleKeys.filter(key => key.toUpperCase().indexOf(this._searchTerm.toUpperCase()) > -1);
const exactFound = keyOptions.findIndex(key => key.toUpperCase() === this._searchTerm.toUpperCase()) > -1 ||
this.props.existingKeys.findIndex(key => key.toUpperCase() === this._searchTerm.toUpperCase()) > -1;
diff --git a/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx b/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx
index b206765e8..b77173b25 100644
--- a/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx
+++ b/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx
@@ -137,6 +137,7 @@ export interface MovableRowProps {
textWrapRow: (doc: Doc) => void;
rowWrapped: boolean;
dropAction: string;
+ addDocTab: any;
}
export class MovableRow extends React.Component<MovableRowProps> {
@@ -232,6 +233,7 @@ export class MovableRow extends React.Component<MovableRowProps> {
<div className="row-dragger">
<div className="row-option" onClick={undoBatch(() => this.props.removeDoc(this.props.rowInfo.original))}><FontAwesomeIcon icon="trash" size="sm" /></div>
<div className="row-option" style={{ cursor: "grab" }} ref={reference} onPointerDown={onItemDown}><FontAwesomeIcon icon="grip-vertical" size="sm" /></div>
+ <div className="row-option" onClick={() => this.props.addDocTab(this.props.rowInfo.original, "onRight")}><FontAwesomeIcon icon="external-link-alt" size="sm" /></div>
</div>
{children}
</ReactTableDefaults.TrComponent>
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index a24140b48..a0bbae88f 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -62,10 +62,15 @@
width: calc(100% - 52px);
margin-left: 50px;
+ z-index: 10000;
+ overflow-y: visible;
+
&.-header {
font-size: 12px;
height: 30px;
box-shadow: none;
+ z-index: 10000;
+ overflow-y: visible;
}
.rt-resizable-header-content {
@@ -175,11 +180,15 @@
.collectionSchemaView-header {
height: 100%;
color: gray;
+ z-index: 10000;
+ overflow-y: visible;
.collectionSchema-header-menu {
height: 100%;
+ z-index: 10000;
.collectionSchema-header-toggler {
+ z-index: 10000;
width: 100%;
height: 100%;
padding: 4px;
@@ -412,6 +421,56 @@ button.add-column {
&:hover .collectionSchemaView-cellContents-docExpander {
display: block;
}
+
+
+ .collectionSchemaView-cellContents-document {
+ display: inline-block;
+ }
+
+ .collectionSchemaView-cellContents-docButton {
+ float: right;
+ width: "15px";
+ height: "15px";
+ }
+
+ .collectionSchemaView-dropdownWrapper {
+
+ border: grey;
+ border-style: solid;
+ border-width: 1px;
+ height: 100%;
+
+ .collectionSchemaView-dropdownButton {
+
+ //display: inline-block;
+ float: left;
+ height: 100%;
+
+
+ }
+
+ .collectionSchemaView-dropdownText {
+ display: inline-block;
+ //float: right;
+ height: 100%;
+ display: "flex";
+ font-size: 13;
+ justify-content: "center";
+ align-items: "center";
+ }
+
+ }
+
+ .collectionSchemaView-dropdownContainer {
+ position: absolute;
+ border: 1px solid rgba(0, 0, 0, 0.04);
+ box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14);
+
+ .collectionSchemaView-dropdownOption:hover {
+ background-color: rgba(0, 0, 0, 0.14);
+ cursor: pointer;
+ }
+ }
}
.collectionSchemaView-cellContents-docExpander {
@@ -422,6 +481,7 @@ button.add-column {
top: 0;
right: 0;
background-color: lightgray;
+
}
.doc-drag-over {
@@ -429,6 +489,10 @@ button.add-column {
}
.collectionSchemaView-toolbar {
+ z-index: 1000;
+}
+
+.collectionSchemaView-toolbar {
height: 30px;
display: flex;
justify-content: flex-end;
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 56a2a517c..18a53541d 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -1,5 +1,5 @@
import React = require("react");
-import { library } from '@fortawesome/fontawesome-svg-core';
+import { library, IconProp } from '@fortawesome/fontawesome-svg-core';
import { faCog, faPlus, faSortDown, faSortUp, faTable } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { action, computed, observable, untracked } from "mobx";
@@ -10,7 +10,7 @@ import { Doc, DocListCast, Field, Opt } from "../../../fields/Doc";
import { Id } from "../../../fields/FieldSymbols";
import { List } from "../../../fields/List";
import { listSpec } from "../../../fields/Schema";
-import { SchemaHeaderField } from "../../../fields/SchemaHeaderField";
+import { SchemaHeaderField, PastelSchemaPalette } from "../../../fields/SchemaHeaderField";
import { ComputedField } from "../../../fields/ScriptField";
import { Cast, FieldValue, NumCast, StrCast, BoolCast } from "../../../fields/Types";
import { Docs, DocumentOptions } from "../../documents/Documents";
@@ -20,14 +20,14 @@ import { undoBatch } from "../../util/UndoManager";
import { COLLECTION_BORDER_WIDTH } from '../../views/globalCssVariables.scss';
import { ContextMenu } from "../ContextMenu";
import '../DocumentDecorations.scss';
-import { CellProps, CollectionSchemaCell, CollectionSchemaCheckboxCell, CollectionSchemaDocCell, CollectionSchemaNumberCell, CollectionSchemaStringCell } from "./CollectionSchemaCells";
-import { CollectionSchemaAddColumnHeader, CollectionSchemaHeader } from "./CollectionSchemaHeaders";
+import { CellProps, CollectionSchemaCell, CollectionSchemaCheckboxCell, CollectionSchemaDocCell, CollectionSchemaNumberCell, CollectionSchemaStringCell, CollectionSchemaImageCell, CollectionSchemaListCell } from "./CollectionSchemaCells";
+import { CollectionSchemaAddColumnHeader, CollectionSchemaHeader, CollectionSchemaColumnMenu, KeysDropdown } from "./CollectionSchemaHeaders";
import { MovableColumn, MovableRow } from "./CollectionSchemaMovableTableHOC";
import "./CollectionSchemaView.scss";
import { CollectionSubView } from "./CollectionSubView";
import { CollectionView } from "./CollectionView";
import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView";
-import { setupMoveUpEvents, emptyFunction, returnZero, returnOne, returnFalse } from "../../../Utils";
+import { setupMoveUpEvents, emptyFunction, returnZero, returnOne, returnFalse, returnEmptyFilter, emptyPath } from "../../../Utils";
import { SnappingManager } from "../../util/SnappingManager";
library.add(faCog, faPlus, faSortUp, faSortDown);
@@ -40,6 +40,8 @@ export enum ColumnType {
String,
Boolean,
Doc,
+ Image,
+ List
}
// this map should be used for keys that should have a const type of value
const columnTypes: Map<string, ColumnType> = new Map([
@@ -62,6 +64,781 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
@computed get tableWidth() { return this.props.PanelWidth() - 2 * this.borderWidth - this.DIVIDER_WIDTH - this.previewWidth(); }
@computed get borderWidth() { return Number(COLLECTION_BORDER_WIDTH); }
+ @observable pointerX: number = 0;
+ @observable pointerY: number = 0;
+ @computed get menuCoordinates() { return this.props.ScreenToLocalTransform().transformPoint(this.pointerX, this.pointerY); }
+
+ @observable col: any = "";
+ @computed get possibleKeys() { return this.documentKeys.filter(key => this.columns.findIndex(existingKey => existingKey.heading.toUpperCase() === key.toUpperCase()) === -1); }
+
+ @observable menuContent: any = "";
+ @observable headerOpen: boolean = false;
+
+ @observable private _isOpen: boolean = false;
+ @observable private _node: HTMLDivElement | null = null;
+
+ componentDidMount() {
+ document.addEventListener("pointerdown", this.detectClick);
+ document.addEventListener("keydown", this.onKeyDown);
+ }
+
+ componentWillUnmount() {
+ document.removeEventListener("pointerdown", this.detectClick);
+ document.removeEventListener("keydown", this.onKeyDown);
+ }
+
+ detectClick = (e: PointerEvent): void => {
+ if (this._node && this._node.contains(e.target as Node)) {
+ } else {
+ this._isOpen = false;
+ this.setHeaderIsEditing(false);
+ }
+ }
+
+ @action
+ toggleIsOpen = (): void => {
+ this._isOpen = !this._isOpen;
+ this.setHeaderIsEditing(this._isOpen);
+ }
+
+ changeColumnType = (type: ColumnType, col: any): void => {
+ this.setColumnType(col, type);
+ }
+
+ changeColumnSort = (desc: boolean | undefined, col: any): void => {
+ this.setColumnSort(col, desc);
+ }
+
+ changeColumnColor = (color: string, col: any): void => {
+ this.setColumnColor(col, color);
+ }
+
+ @action
+ setNode = (node: HTMLDivElement): void => {
+ if (node) {
+ this._node = node;
+ }
+ }
+
+ renderTypes = (col: any) => {
+ if (columnTypes.get(col.heading)) return <></>;
+
+ const type = col.type;
+ return (
+ <div className="collectionSchema-headerMenu-group">
+ <label>Column type:</label>
+ <div className="columnMenu-types">
+ <div className={"columnMenu-option" + (type === ColumnType.Any ? " active" : "")} onClick={() => this.changeColumnType(ColumnType.Any, col)}>
+ <FontAwesomeIcon icon={"align-justify"} size="sm" />
+ Any
+ </div>
+ <div className={"columnMenu-option" + (type === ColumnType.Number ? " active" : "")} onClick={() => this.changeColumnType(ColumnType.Number, col)}>
+ <FontAwesomeIcon icon={"hashtag"} size="sm" />
+ Number
+ </div>
+ <div className={"columnMenu-option" + (type === ColumnType.String ? " active" : "")} onClick={() => this.changeColumnType(ColumnType.String, col)}>
+ <FontAwesomeIcon icon={"font"} size="sm" />
+ Text
+ </div>
+ <div className={"columnMenu-option" + (type === ColumnType.Boolean ? " active" : "")} onClick={() => this.changeColumnType(ColumnType.Boolean, col)}>
+ <FontAwesomeIcon icon={"check-square"} size="sm" />
+ Checkbox
+ </div>
+ <div className={"columnMenu-option" + (type === ColumnType.List ? " active" : "")} onClick={() => this.changeColumnType(ColumnType.List, col)}>
+ <FontAwesomeIcon icon={"list-ul"} size="sm" />
+ List
+ </div>
+ <div className={"columnMenu-option" + (type === ColumnType.Doc ? " active" : "")} onClick={() => this.changeColumnType(ColumnType.Doc, col)}>
+ <FontAwesomeIcon icon={"file"} size="sm" />
+ Document
+ </div>
+ <div className={"columnMenu-option" + (type === ColumnType.Image ? " active" : "")} onClick={() => this.changeColumnType(ColumnType.Image, col)}>
+ <FontAwesomeIcon icon={"image"} size="sm" />
+ Image
+ </div>
+ </div>
+ </div >
+ );
+ }
+
+ renderSorting = (col: any) => {
+ const sort = col.desc;
+ return (
+ <div className="collectionSchema-headerMenu-group">
+ <label>Sort by:</label>
+ <div className="columnMenu-sort">
+ <div className={"columnMenu-option" + (sort === true ? " active" : "")} onClick={() => this.changeColumnSort(true, col)}>
+ <FontAwesomeIcon icon="sort-amount-down" size="sm" />
+ Sort descending
+ </div>
+ <div className={"columnMenu-option" + (sort === false ? " active" : "")} onClick={() => this.changeColumnSort(false, col)}>
+ <FontAwesomeIcon icon="sort-amount-up" size="sm" />
+ Sort ascending
+ </div>
+ <div className="columnMenu-option" onClick={() => this.changeColumnSort(undefined, col)}>
+ <FontAwesomeIcon icon="times" size="sm" />
+ Clear sorting
+ </div>
+ </div>
+ </div>
+ );
+ }
+
+ renderColors = (col: any) => {
+ const selected = col.color;
+
+ const pink = PastelSchemaPalette.get("pink2");
+ const purple = PastelSchemaPalette.get("purple2");
+ const blue = PastelSchemaPalette.get("bluegreen1");
+ const yellow = PastelSchemaPalette.get("yellow4");
+ const red = PastelSchemaPalette.get("red2");
+ const gray = "#f1efeb";
+
+ return (
+ <div className="collectionSchema-headerMenu-group">
+ <label>Color:</label>
+ <div className="columnMenu-colors">
+ <div className={"columnMenu-colorPicker" + (selected === pink ? " active" : "")} style={{ backgroundColor: pink }} onClick={() => this.changeColumnColor(pink!, col)}></div>
+ <div className={"columnMenu-colorPicker" + (selected === purple ? " active" : "")} style={{ backgroundColor: purple }} onClick={() => this.changeColumnColor(purple!, col)}></div>
+ <div className={"columnMenu-colorPicker" + (selected === blue ? " active" : "")} style={{ backgroundColor: blue }} onClick={() => this.changeColumnColor(blue!, col)}></div>
+ <div className={"columnMenu-colorPicker" + (selected === yellow ? " active" : "")} style={{ backgroundColor: yellow }} onClick={() => this.changeColumnColor(yellow!, col)}></div>
+ <div className={"columnMenu-colorPicker" + (selected === red ? " active" : "")} style={{ backgroundColor: red }} onClick={() => this.changeColumnColor(red!, col)}></div>
+ <div className={"columnMenu-colorPicker" + (selected === gray ? " active" : "")} style={{ backgroundColor: gray }} onClick={() => this.changeColumnColor(gray, col)}></div>
+ </div>
+ </div>
+ );
+ }
+
+ renderContent = (col: any) => {
+ return (
+ <div className="collectionSchema-header-menuOptions">
+ <div className="collectionSchema-headerMenu-group">
+ <label>Key:</label>
+ <KeysDropdown
+ keyValue={col.heading}
+ possibleKeys={this.possibleKeys}
+ existingKeys={this.columns.map(c => c.heading)}
+ canAddNew={true}
+ addNew={false}
+ onSelect={this.changeColumns}
+ setIsEditing={this.setHeaderIsEditing}
+ />
+ </div>
+ {false ? <></> :
+ <>
+ {this.renderTypes(col)}
+ {this.renderSorting(col)}
+ {this.renderColors(col)}
+ <div className="collectionSchema-headerMenu-group">
+ <button onClick={() => this.deleteColumn(col.heading)}>Delete Column</button>
+ </div>
+ </>
+ }
+ </div>
+ );
+ }
+
+
+ //anchorPoints.TOP_CENTER
+
+ @computed get renderMenu() {
+ return (
+ <div className="collectionSchema-header-menu" ref={this.setNode}
+ style={{
+ position: "absolute", background: "white",
+ transform: `translate(${this.menuCoordinates[0]}px, ${this.menuCoordinates[1] - 150}px)`
+ }}>
+ {/* <Flyout anchorPoint={anchorPoints.TOP_CENTER} content={this.renderContent(this.col)}>
+ <div className="collectionSchema-header-toggler" onClick={() => this.toggleIsOpen()}>{this.menuContent}</div>
+ </ Flyout > */}
+ {this.renderContent(this.col)}
+ </div>
+ );
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+ // ADDED START HEREE
+ //
+ //
+ //
+
+ @observable _headerIsEditing: boolean = false;
+ @observable _cellIsEditing: boolean = false;
+ @observable _focusedCell: { row: number, col: number } = { row: 0, col: 0 };
+ @observable _openCollections: Array<string> = [];
+
+ @observable _showDoc: Doc | undefined;
+ @observable _showDataDoc: any = "";
+ @observable _showDocPos: number[] = [];
+
+ @computed get columns() {
+ return Cast(this.props.Document.schemaColumns, listSpec(SchemaHeaderField), []);
+ }
+ set columns(columns: SchemaHeaderField[]) {
+ this.props.Document.schemaColumns = new List<SchemaHeaderField>(columns);
+ }
+
+ // @computed get childDocs() {
+ // if (this.childDocs) return this.childDocs;
+
+ // const doc = this.props.DataDoc ? this.props.DataDoc : this.props.Document;
+ // return DocListCast(doc[this.props.fieldKey]);
+ // }
+
+ set childDocs(docs: Doc[]) {
+ const doc = this.props.DataDoc ? this.props.DataDoc : this.props.Document;
+ doc[this.props.fieldKey] = new List<Doc>(docs);
+ }
+
+ @computed get textWrappedRows() {
+ return Cast(this.props.Document.textwrappedSchemaRows, listSpec("string"), []);
+ }
+ set textWrappedRows(textWrappedRows: string[]) {
+ this.props.Document.textwrappedSchemaRows = new List<string>(textWrappedRows);
+ }
+
+ @computed get resized(): { id: string, value: number }[] {
+ return this.columns.reduce((resized, shf) => {
+ (shf.width > -1) && resized.push({ id: shf.heading, value: shf.width });
+ return resized;
+ }, [] as { id: string, value: number }[]);
+ }
+ @computed get sorted(): SortingRule[] {
+ return this.columns.reduce((sorted, shf) => {
+ shf.desc && sorted.push({ id: shf.heading, desc: shf.desc });
+ return sorted;
+ }, [] as SortingRule[]);
+ }
+
+ @action
+ openHeader = (col: any, menu: any) => {
+ this.menuContent = menu;
+ this.col = col;
+ this.headerOpen = !this.headerOpen;
+ }
+
+ @computed get tableColumns(): Column<Doc>[] {
+ const columns: Column<Doc>[] = [];
+ const tableIsFocused = this.isFocused(this.props.Document);
+ const focusedRow = this._focusedCell.row;
+ const focusedCol = this._focusedCell.col;
+ const isEditable = !this._headerIsEditing;
+
+ if (this.childDocs.reduce((found, doc) => found || doc.type === "collection", false)) {
+ columns.push(
+ {
+ expander: true,
+ Header: "",
+ width: 30,
+ Expander: (rowInfo) => {
+ if (rowInfo.original.type === "collection") {
+ if (rowInfo.isExpanded) return <div className="collectionSchemaView-expander" onClick={() => this.onCloseCollection(rowInfo.original)}><FontAwesomeIcon icon={"sort-up"} size="sm" /></div>;
+ if (!rowInfo.isExpanded) return <div className="collectionSchemaView-expander" onClick={() => this.onExpandCollection(rowInfo.original)}><FontAwesomeIcon icon={"sort-down"} size="sm" /></div>;
+ } else {
+ return null;
+ }
+ }
+ }
+ );
+ }
+
+ const cols = this.columns.map(col => {
+
+ const icon: IconProp = this.getColumnType(col) === ColumnType.Number ? "hashtag" : this.getColumnType(col) === ColumnType.String ? "font" :
+ this.getColumnType(col) === ColumnType.Boolean ? "check-square" : this.getColumnType(col) === ColumnType.Doc ? "file" :
+ this.getColumnType(col) === ColumnType.Image ? "image" : this.getColumnType(col) === ColumnType.List ? "list-ul" : "align-justify";
+
+ // this.menuContent = <div><FontAwesomeIcon icon={icon} size="sm" />{col.heading}</div>;
+
+ const menuContent = <div><FontAwesomeIcon icon={icon} size="sm" />{col.heading}</div>;
+
+ // this.col = col;
+
+ const header =
+ <div className="collectionSchemaView-header"
+ onClick={e => { this.openHeader(col, menuContent); }}
+ style={{ background: col.color }}>
+ {menuContent}
+ </div>;
+
+
+ // <CollectionSchemaHeader
+ // keyValue={col}
+ // possibleKeys={possibleKeys}
+ // existingKeys={this.columns.map(c => c.heading)}
+ // keyType={this.getColumnType(col)}
+ // typeConst={columnTypes.get(col.heading) !== undefined}
+ // onSelect={this.changeColumns}
+ // setIsEditing={this.setHeaderIsEditing}
+ // deleteColumn={this.deleteColumn}
+ // setColumnType={this.setColumnType}
+ // setColumnSort={this.setColumnSort}
+ // setColumnColor={this.setColumnColor}
+ // />;
+
+
+ return {
+ Header: <MovableColumn columnRenderer={header} columnValue={col} allColumns={this.columns} reorderColumns={this.reorderColumns} ScreenToLocalTransform={this.props.ScreenToLocalTransform} />,
+ accessor: (doc: Doc) => doc ? doc[col.heading] : 0,
+ id: col.heading,
+ Cell: (rowProps: CellInfo) => {
+ const rowIndex = rowProps.index;
+ const columnIndex = this.columns.map(c => c.heading).indexOf(rowProps.column.id!);
+ const isFocused = focusedRow === rowIndex && focusedCol === columnIndex && tableIsFocused;
+
+ const props: CellProps = {
+ row: rowIndex,
+ col: columnIndex,
+ rowProps: rowProps,
+ isFocused: isFocused,
+ changeFocusedCellByIndex: this.changeFocusedCellByIndex,
+ CollectionView: this.props.CollectionView,
+ ContainingCollection: this.props.ContainingCollectionView,
+ Document: this.props.Document,
+ fieldKey: this.props.fieldKey,
+ renderDepth: this.props.renderDepth,
+ addDocTab: this.props.addDocTab,
+ pinToPres: this.props.pinToPres,
+ moveDocument: this.props.moveDocument,
+ setIsEditing: this.setCellIsEditing,
+ isEditable: isEditable,
+ setPreviewDoc: this.setPreviewDoc,
+ setComputed: this.setComputed,
+ getField: this.getField,
+ showDoc: this.showDoc,
+ };
+
+ const colType = this.getColumnType(col);
+ if (colType === ColumnType.Number) return <CollectionSchemaNumberCell {...props} />;
+ if (colType === ColumnType.String) return <CollectionSchemaStringCell {...props} />;
+ if (colType === ColumnType.Boolean) return <CollectionSchemaCheckboxCell {...props} />;
+ if (colType === ColumnType.Doc) return <CollectionSchemaDocCell {...props} />;
+ if (colType === ColumnType.Image) return <CollectionSchemaImageCell {...props} />;
+ if (colType === ColumnType.List) return <CollectionSchemaListCell {...props} />;
+ return <CollectionSchemaCell {...props} />;
+ },
+ minWidth: 200,
+ };
+ });
+ columns.push(...cols);
+
+ columns.push({
+ Header: <CollectionSchemaAddColumnHeader createColumn={this.createColumn} />,
+ accessor: (doc: Doc) => 0,
+ id: "add",
+ Cell: (rowProps: CellInfo) => <></>,
+ width: 28,
+ resizable: false
+ });
+ return columns;
+ }
+
+ tableAddDoc = (doc: Doc, relativeTo?: Doc, before?: boolean) => {
+ return Doc.AddDocToList(this.props.Document, this.props.fieldKey, doc, relativeTo, before);
+ }
+
+ private getTrProps: ComponentPropsGetterR = (state, rowInfo) => {
+ return !rowInfo ? {} : {
+ ScreenToLocalTransform: this.props.ScreenToLocalTransform,
+ addDoc: this.tableAddDoc,
+ removeDoc: this.props.removeDocument,
+ rowInfo,
+ rowFocused: !this._headerIsEditing && rowInfo.index === this._focusedCell.row && this.isFocused(this.props.Document),
+ textWrapRow: this.toggleTextWrapRow,
+ rowWrapped: this.textWrappedRows.findIndex(id => rowInfo.original[Id] === id) > -1,
+ dropAction: StrCast(this.props.Document.childDropAction),
+ addDocTab: this.props.addDocTab
+ };
+ }
+
+ private getTdProps: ComponentPropsGetterR = (state, rowInfo, column, instance) => {
+ if (!rowInfo || column) return {};
+
+ const row = rowInfo.index;
+ //@ts-ignore
+ const col = this.columns.map(c => c.heading).indexOf(column!.id);
+ const isFocused = this._focusedCell.row === row && this._focusedCell.col === col && this.isFocused(this.props.Document);
+ // TODO: editing border doesn't work :(
+ return {
+ style: {
+ border: !this._headerIsEditing && isFocused ? "2px solid rgb(255, 160, 160)" : "1px solid #f1efeb"
+ }
+ };
+ }
+
+ @action
+ onCloseCollection = (collection: Doc): void => {
+ const index = this._openCollections.findIndex(col => col === collection[Id]);
+ if (index > -1) this._openCollections.splice(index, 1);
+ }
+
+ @action onExpandCollection = (collection: Doc) => this._openCollections.push(collection[Id]);
+ @action setCellIsEditing = (isEditing: boolean) => this._cellIsEditing = isEditing;
+ @action setHeaderIsEditing = (isEditing: boolean) => this._headerIsEditing = isEditing;
+
+ @action
+ onPointDown = (e: React.PointerEvent): void => {
+ this.setFocused(this.props.Document);
+ if (e.button === 0 && !e.altKey && !e.ctrlKey && !e.metaKey && this.props.isSelected(true)) {
+ e.stopPropagation();
+ }
+ this.pointerY = e.screenY;
+ this.pointerX = e.screenX;
+ this.headerOpen = false;
+ }
+
+ @action
+ onKeyDown = (e: KeyboardEvent): void => {
+ if (!this._cellIsEditing && !this._headerIsEditing && this.isFocused(this.props.Document)) {// && this.props.isSelected(true)) {
+ const direction = e.key === "Tab" ? "tab" : e.which === 39 ? "right" : e.which === 37 ? "left" : e.which === 38 ? "up" : e.which === 40 ? "down" : "";
+ this._focusedCell = this.changeFocusedCellByDirection(direction, this._focusedCell.row, this._focusedCell.col);
+
+ const pdoc = FieldValue(this.childDocs[this._focusedCell.row]);
+ pdoc && this.setPreviewDoc(pdoc);
+ }
+ }
+
+ changeFocusedCellByDirection = (direction: string, curRow: number, curCol: number) => {
+ switch (direction) {
+ case "tab": return { row: (curRow + 1 === this.childDocs.length ? 0 : curRow + 1), col: curCol + 1 === this.columns.length ? 0 : curCol + 1 };
+ case "right": return { row: curRow, col: curCol + 1 === this.columns.length ? curCol : curCol + 1 };
+ case "left": return { row: curRow, col: curCol === 0 ? curCol : curCol - 1 };
+ case "up": return { row: curRow === 0 ? curRow : curRow - 1, col: curCol };
+ case "down": return { row: curRow + 1 === this.childDocs.length ? curRow : curRow + 1, col: curCol };
+ }
+ return this._focusedCell;
+ }
+
+ @action
+ changeFocusedCellByIndex = (row: number, col: number): void => {
+ if (this._focusedCell.row !== row || this._focusedCell.col !== col) {
+ this._focusedCell = { row: row, col: col };
+ }
+ this.setFocused(this.props.Document);
+ }
+
+ @undoBatch
+ createRow = () => {
+ this.props.addDocument(Docs.Create.TextDocument("", { title: "", _width: 100, _height: 30 }));
+ }
+
+ @undoBatch
+ @action
+ createColumn = () => {
+ let index = 0;
+ let found = this.columns.findIndex(col => col.heading.toUpperCase() === "New field".toUpperCase()) > -1;
+ while (found) {
+ index++;
+ found = this.columns.findIndex(col => col.heading.toUpperCase() === ("New field (" + index + ")").toUpperCase()) > -1;
+ }
+ this.columns.push(new SchemaHeaderField(`New field ${index ? "(" + index + ")" : ""}`, "#f1efeb"));
+ }
+
+ @undoBatch
+ @action
+ deleteColumn = (key: string) => {
+ const columns = this.columns;
+ if (columns === undefined) {
+ this.columns = new List<SchemaHeaderField>([]);
+ } else {
+ const index = columns.map(c => c.heading).indexOf(key);
+ if (index > -1) {
+ columns.splice(index, 1);
+ this.columns = columns;
+ }
+ }
+ }
+
+ @undoBatch
+ @action
+ changeColumns = (oldKey: string, newKey: string, addNew: boolean) => {
+ const columns = this.columns;
+ if (columns === undefined) {
+ this.columns = new List<SchemaHeaderField>([new SchemaHeaderField(newKey, "f1efeb")]);
+ } else {
+ if (addNew) {
+ columns.push(new SchemaHeaderField(newKey, "f1efeb"));
+ this.columns = columns;
+ } else {
+ const index = columns.map(c => c.heading).indexOf(oldKey);
+ if (index > -1) {
+ const column = columns[index];
+ column.setHeading(newKey);
+ columns[index] = column;
+ this.columns = columns;
+ }
+ }
+ }
+ }
+
+ getColumnType = (column: SchemaHeaderField): ColumnType => {
+ // added functionality to convert old column type stuff to new column type stuff -syip
+ if (column.type && column.type !== 0) {
+ return column.type;
+ }
+ if (columnTypes.get(column.heading)) {
+ column.type = columnTypes.get(column.heading)!;
+ return columnTypes.get(column.heading)!;
+ }
+ const typesDoc = FieldValue(Cast(this.props.Document.schemaColumnTypes, Doc));
+ if (!typesDoc) {
+ column.type = ColumnType.Any;
+ return ColumnType.Any;
+ }
+ column.type = NumCast(typesDoc[column.heading]);
+ return NumCast(typesDoc[column.heading]);
+ }
+
+ @undoBatch
+ setColumnType = (columnField: SchemaHeaderField, type: ColumnType): void => {
+ if (columnTypes.get(columnField.heading)) return;
+
+ const columns = this.columns;
+ const index = columns.indexOf(columnField);
+ if (index > -1) {
+ columnField.setType(NumCast(type));
+ columns[index] = columnField;
+ this.columns = columns;
+ }
+ }
+
+ @undoBatch
+ setColumnColor = (columnField: SchemaHeaderField, color: string): void => {
+ const columns = this.columns;
+ const index = columns.indexOf(columnField);
+ if (index > -1) {
+ columnField.setColor(color);
+ columns[index] = columnField;
+ this.columns = columns; // need to set the columns to trigger rerender
+ }
+ }
+
+ @action
+ setColumns = (columns: SchemaHeaderField[]) => this.columns = columns
+
+ @undoBatch
+ reorderColumns = (toMove: SchemaHeaderField, relativeTo: SchemaHeaderField, before: boolean, columnsValues: SchemaHeaderField[]) => {
+ const columns = [...columnsValues];
+ const oldIndex = columns.indexOf(toMove);
+ const relIndex = columns.indexOf(relativeTo);
+ const newIndex = (oldIndex > relIndex && !before) ? relIndex + 1 : (oldIndex < relIndex && before) ? relIndex - 1 : relIndex;
+
+ if (oldIndex === newIndex) return;
+
+ columns.splice(newIndex, 0, columns.splice(oldIndex, 1)[0]);
+ this.columns = columns;
+ }
+
+ @undoBatch
+ @action
+ setColumnSort = (columnField: SchemaHeaderField, descending: boolean | undefined) => {
+ const columns = this.columns;
+ const index = columns.findIndex(c => c.heading === columnField.heading);
+ const column = columns[index];
+ column.setDesc(descending);
+ columns[index] = column;
+ this.columns = columns;
+ }
+
+ get documentKeys() {
+ const docs = this.childDocs;
+ const keys: { [key: string]: boolean } = {};
+ // bcz: ugh. this is untracked since otherwise a large collection of documents will blast the server for all their fields.
+ // then as each document's fields come back, we update the documents _proxies. Each time we do this, the whole schema will be
+ // invalidated and re-rendered. This workaround will inquire all of the document fields before the options button is clicked.
+ // then by the time the options button is clicked, all of the fields should be in place. If a new field is added while this menu
+ // is displayed (unlikely) it won't show up until something else changes.
+ //TODO Types
+ untracked(() => docs.map(doc => Doc.GetAllPrototypes(doc).map(proto => Object.keys(proto).forEach(key => keys[key] = false))));
+
+ this.columns.forEach(key => keys[key.heading] = true);
+ return Array.from(Object.keys(keys));
+ }
+
+ @undoBatch
+ @action
+ toggleTextwrap = async () => {
+ const textwrappedRows = Cast(this.props.Document.textwrappedSchemaRows, listSpec("string"), []);
+ if (textwrappedRows.length) {
+ this.props.Document.textwrappedSchemaRows = new List<string>([]);
+ } else {
+ const docs = DocListCast(this.props.Document[this.props.fieldKey]);
+ const allRows = docs instanceof Doc ? [docs[Id]] : docs.map(doc => doc[Id]);
+ this.props.Document.textwrappedSchemaRows = new List<string>(allRows);
+ }
+ }
+
+ @action
+ toggleTextWrapRow = (doc: Doc): void => {
+ const textWrapped = this.textWrappedRows;
+ const index = textWrapped.findIndex(id => doc[Id] === id);
+
+ index > -1 ? textWrapped.splice(index, 1) : textWrapped.push(doc[Id]);
+
+ this.textWrappedRows = textWrapped;
+ }
+
+ @computed
+ get reactTable() {
+ const children = this.childDocs;
+ const hasCollectionChild = children.reduce((found, doc) => found || doc.type === "collection", false);
+ const expandedRowsList = this._openCollections.map(col => children.findIndex(doc => doc[Id] === col).toString());
+ const expanded = {};
+ //@ts-ignore
+ expandedRowsList.forEach(row => expanded[row] = true);
+ const rerender = [...this.textWrappedRows]; // TODO: get component to rerender on text wrap change without needign to console.log :((((
+
+ return <ReactTable
+ style={{ position: "relative" }}
+ data={children}
+ page={0}
+ pageSize={children.length}
+ showPagination={false}
+ columns={this.tableColumns}
+ getTrProps={this.getTrProps}
+ getTdProps={this.getTdProps}
+ sortable={false}
+ TrComponent={MovableRow}
+ sorted={this.sorted}
+ expanded={expanded}
+ resized={this.resized}
+ onResizedChange={this.onResizedChange}
+ SubComponent={!hasCollectionChild ? undefined : row => (row.original.type !== "collection") ? (null) :
+ <div className="reactTable-sub">{this.renderSchemaTable(row.original, undefined, undefined)}</div>}
+ //<div className="reactTable-sub"><SchemaTable {...this.props} Document={row.original} dataDoc={undefined} childDocs={undefined} /></div>}
+
+ />;
+ }
+
+ onResizedChange = (newResized: Resize[], event: any) => {
+ const columns = this.columns;
+ newResized.forEach(resized => {
+ const index = columns.findIndex(c => c.heading === resized.id);
+ const column = columns[index];
+ column.setWidth(resized.value);
+ columns[index] = column;
+ });
+ this.columns = columns;
+ }
+
+ onContextMenu = (e: React.MouseEvent): void => {
+ if (!e.isPropagationStopped() && this.props.Document[Id] !== "mainDoc") { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7
+ // ContextMenu.Instance.addItem({ description: "Make DB", event: this.makeDB, icon: "table" });
+ ContextMenu.Instance.addItem({ description: "Toggle text wrapping", event: this.toggleTextwrap, icon: "table" });
+ }
+ }
+
+ getField = (row: number, col?: number) => {
+ const docs = this.childDocs;
+
+ row = row % docs.length;
+ while (row < 0) row += docs.length;
+ const columns = this.columns;
+ const doc = docs[row];
+ if (col === undefined) {
+ return doc;
+ }
+ if (col >= 0 && col < columns.length) {
+ const column = this.columns[col].heading;
+ return doc[column];
+ }
+ return undefined;
+ }
+
+ createTransformer = (row: number, col: number): Transformer => {
+ const self = this;
+ const captures: { [name: string]: Field } = {};
+
+ const transformer: ts.TransformerFactory<ts.SourceFile> = context => {
+ return root => {
+ function visit(node: ts.Node) {
+ node = ts.visitEachChild(node, visit, context);
+ if (ts.isIdentifier(node)) {
+ const isntPropAccess = !ts.isPropertyAccessExpression(node.parent) || node.parent.expression === node;
+ const isntPropAssign = !ts.isPropertyAssignment(node.parent) || node.parent.name !== node;
+ if (isntPropAccess && isntPropAssign) {
+ if (node.text === "$r") {
+ return ts.createNumericLiteral(row.toString());
+ } else if (node.text === "$c") {
+ return ts.createNumericLiteral(col.toString());
+ } else if (node.text === "$") {
+ if (ts.isCallExpression(node.parent)) {
+ // captures.doc = self.props.Document;
+ // captures.key = self.props.fieldKey;
+ }
+ }
+ }
+ }
+
+ return node;
+ }
+ return ts.visitNode(root, visit);
+ };
+ };
+
+ // const getVars = () => {
+ // return { capturedVariables: captures };
+ // };
+
+ return { transformer, /*getVars*/ };
+ }
+
+ setComputed = (script: string, doc: Doc, field: string, row: number, col: number): boolean => {
+ script =
+ `const $ = (row:number, col?:number) => {
+ if(col === undefined) {
+ return (doc as any)[key][row + ${row}];
+ }
+ return (doc as any)[key][row + ${row}][(doc as any).schemaColumns[col + ${col}].heading];
+ }
+ return ${script}`;
+ const compiled = CompileScript(script, { params: { this: Doc.name }, capturedVariables: { doc: this.props.Document, key: this.props.fieldKey }, typecheck: false, transformer: this.createTransformer(row, col) });
+ if (compiled.compiled) {
+ doc[field] = new ComputedField(compiled);
+ return true;
+ }
+ return false;
+ }
+
+ @action
+ showDoc = (doc: Doc | undefined, dataDoc?: Doc, screenX?: number, screenY?: number) => {
+ this._showDoc = doc;
+ if (dataDoc && screenX && screenY) {
+ this._showDocPos = this.props.ScreenToLocalTransform().transformPoint(screenX, screenY);
+ }
+ }
+
+ onOpenClick = () => {
+ if (this._showDoc) {
+ this.props.addDocTab(this._showDoc, "onRight");
+ }
+ }
+
+ getPreviewTransform = (): Transform => {
+ return this.props.ScreenToLocalTransform().translate(- this.borderWidth - this.DIVIDER_WIDTH - this.tableWidth, - this.borderWidth);
+ }
+
+
+
+ // ADDED ENDS HERE
+ //
+ //
+
+
+
+
+
private createTarget = (ele: HTMLDivElement) => {
this._previewCont = ele;
super.CreateDropTarget(ele);
@@ -100,15 +877,12 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
this.props.select(false);
}
}
+ this.headerOpen = false;
}
@computed
get previewDocument(): Doc | undefined { return this.previewDoc; }
- getPreviewTransform = (): Transform => {
- return this.props.ScreenToLocalTransform().translate(- this.borderWidth - this.DIVIDER_WIDTH - this.tableWidth, - this.borderWidth);
- }
-
@computed
get dividerDragger() {
return this.previewWidth() === 0 ? (null) :
@@ -149,32 +923,90 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
</div>;
}
+
+ // this is added too
+ renderSchemaTable = (Document: any, dataDoc: any, childDocs: any) => {
+ return <div className="collectionSchemaView-table" onPointerDown={this.onPointDown} onWheel={e => this.props.active(true) && e.stopPropagation()} onDrop={e => this.onExternalDrop(e, {})} onContextMenu={this.onContextMenu} >
+ {this.reactTable}
+ <div className="collectionSchemaView-addRow" onClick={() => this.createRow()}>+ new</div>
+ {!this._showDoc ? (null) :
+ <div className="collectionSchemaView-documentPreview" //onClick={() => { this.onOpenClick(); }}
+ style={{
+ position: "absolute", width: 150, height: 150,
+ background: "dimGray", display: "block", top: 0, left: 0,
+ transform: `translate(${this._showDocPos[0]}px, ${this._showDocPos[1] - 180}px)`
+ }}
+ ref="overlay"><ContentFittingDocumentView
+ Document={Document}
+ DataDoc={dataDoc}
+ NativeHeight={returnZero}
+ NativeWidth={returnZero}
+ fitToBox={true}
+ FreezeDimensions={true}
+ focus={emptyFunction}
+ LibraryPath={emptyPath}
+ renderDepth={this.props.renderDepth}
+ rootSelected={() => false}
+ PanelWidth={() => 150}
+ PanelHeight={() => 150}
+ ScreenToLocalTransform={this.getPreviewTransform}
+ docFilters={returnEmptyFilter}
+ ContainingCollectionDoc={this.props.CollectionView?.props.Document}
+ ContainingCollectionView={this.props.CollectionView}
+ moveDocument={this.props.moveDocument}
+ parentActive={this.props.active}
+ whenActiveChanged={emptyFunction}
+ addDocTab={this.props.addDocTab}
+ pinToPres={this.props.pinToPres}
+ bringToFront={returnFalse}
+ ContentScaling={returnOne}>
+ </ContentFittingDocumentView>
+ </div>}
+ </div>;
+ }
+
+
+ // changed to render schema table
@computed
get schemaTable() {
- return <SchemaTable
- Document={this.props.Document}
- PanelHeight={this.props.PanelHeight}
- PanelWidth={this.props.PanelWidth}
- childDocs={this.childDocs}
- CollectionView={this.props.CollectionView}
- ContainingCollectionView={this.props.ContainingCollectionView}
- ContainingCollectionDoc={this.props.ContainingCollectionDoc}
- fieldKey={this.props.fieldKey}
- renderDepth={this.props.renderDepth}
- moveDocument={this.props.moveDocument}
- ScreenToLocalTransform={this.props.ScreenToLocalTransform}
- active={this.props.active}
- onDrop={this.onExternalDrop}
- addDocTab={this.props.addDocTab}
- pinToPres={this.props.pinToPres}
- isSelected={this.props.isSelected}
- isFocused={this.isFocused}
- setFocused={this.setFocused}
- setPreviewDoc={this.setPreviewDoc}
- deleteDocument={this.props.removeDocument}
- addDocument={this.props.addDocument}
- dataDoc={this.props.DataDoc}
- />;
+ const preview = "";
+ return <div className="collectionSchemaView-table" onPointerDown={this.onPointDown} onWheel={e => this.props.active(true) && e.stopPropagation()} onDrop={e => this.onExternalDrop(e, {})} onContextMenu={this.onContextMenu} >
+ {this.reactTable}
+ <div className="collectionSchemaView-addRow" onClick={() => this.createRow()}>+ new</div>
+ {!this._showDoc ? (null) :
+ <div className="collectionSchemaView-documentPreview" //onClick={() => { this.onOpenClick(); }}
+ style={{
+ position: "absolute", width: 150, height: 150,
+ background: "dimGray", display: "block", top: 0, left: 0,
+ transform: `translate(${this._showDocPos[0]}px, ${this._showDocPos[1] - 180}px)`
+ }}
+ ref="overlay"><ContentFittingDocumentView
+ Document={this._showDoc}
+ DataDoc={this._showDataDoc}
+ NativeHeight={returnZero}
+ NativeWidth={returnZero}
+ fitToBox={true}
+ FreezeDimensions={true}
+ focus={emptyFunction}
+ LibraryPath={emptyPath}
+ renderDepth={this.props.renderDepth}
+ rootSelected={() => false}
+ PanelWidth={() => 150}
+ PanelHeight={() => 150}
+ ScreenToLocalTransform={this.getPreviewTransform}
+ docFilters={returnEmptyFilter}
+ ContainingCollectionDoc={this.props.CollectionView?.props.Document}
+ ContainingCollectionView={this.props.CollectionView}
+ moveDocument={this.props.moveDocument}
+ parentActive={this.props.active}
+ whenActiveChanged={emptyFunction}
+ addDocTab={this.props.addDocTab}
+ pinToPres={this.props.pinToPres}
+ bringToFront={returnFalse}
+ ContentScaling={returnOne}>
+ </ContentFittingDocumentView>
+ </div>}
+ </div>;
}
@computed
@@ -197,10 +1029,21 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
</div>
{this.dividerDragger}
{!this.previewWidth() ? (null) : this.previewPanel}
+ {this.headerOpen ? this.renderMenu : null}
</div>;
}
}
+
+
+
+
+
+
+
+
+
+
export interface SchemaTableProps {
Document: Doc; // child doc
dataDoc?: Doc;
@@ -226,6 +1069,10 @@ export interface SchemaTableProps {
setPreviewDoc: (document: Doc) => void;
}
+
+
+
+
@observer
export class SchemaTable extends React.Component<SchemaTableProps> {
private DIVIDER_WIDTH = 4;
@@ -235,6 +1082,10 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
@observable _focusedCell: { row: number, col: number } = { row: 0, col: 0 };
@observable _openCollections: Array<string> = [];
+ @observable _showDoc: Doc | undefined;
+ @observable _showDataDoc: any = "";
+ @observable _showDocPos: number[] = [];
+
@computed get previewWidth() { return () => NumCast(this.props.Document.schemaPreviewWidth); }
@computed get previewHeight() { return () => this.props.PanelHeight() - 2 * this.borderWidth; }
@computed get tableWidth() { return this.props.PanelWidth() - 2 * this.borderWidth - this.DIVIDER_WIDTH - this.previewWidth(); }
@@ -279,6 +1130,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
@computed get borderWidth() { return Number(COLLECTION_BORDER_WIDTH); }
@computed get tableColumns(): Column<Doc>[] {
+
const possibleKeys = this.documentKeys.filter(key => this.columns.findIndex(existingKey => existingKey.heading.toUpperCase() === key.toUpperCase()) === -1);
const columns: Column<Doc>[] = [];
const tableIsFocused = this.props.isFocused(this.props.Document);
@@ -305,19 +1157,50 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
}
const cols = this.columns.map(col => {
- const header = <CollectionSchemaHeader
- keyValue={col}
- possibleKeys={possibleKeys}
- existingKeys={this.columns.map(c => c.heading)}
- keyType={this.getColumnType(col)}
- typeConst={columnTypes.get(col.heading) !== undefined}
- onSelect={this.changeColumns}
- setIsEditing={this.setHeaderIsEditing}
- deleteColumn={this.deleteColumn}
- setColumnType={this.setColumnType}
- setColumnSort={this.setColumnSort}
- setColumnColor={this.setColumnColor}
- />;
+
+ const icon: IconProp = this.getColumnType(col) === ColumnType.Number ? "hashtag" : this.getColumnType(col) === ColumnType.String ? "font" :
+ this.getColumnType(col) === ColumnType.Boolean ? "check-square" : this.getColumnType(col) === ColumnType.Doc ? "file" :
+ this.getColumnType(col) === ColumnType.Image ? "image" : this.getColumnType(col) === ColumnType.List ? "list-ul" : "align-justify";
+
+
+
+ const header = <div><FontAwesomeIcon icon={icon} size="sm" />{col.heading}</div>;
+
+ // <div className="collectionSchemaView-header" style={{ background: col.color }}>
+ // <CollectionSchemaColumnMenu
+ // columnField={col}
+ // // keyValue={this.props.keyValue.heading}
+ // possibleKeys={possibleKeys}
+ // existingKeys={this.columns.map(c => c.heading)}
+ // // keyType={this.getColumnType(col)}
+ // typeConst={columnTypes.get(col.heading) !== undefined}
+ // menuButtonContent={<div><FontAwesomeIcon icon={icon} size="sm" />{col.heading}</div>}
+ // addNew={false}
+ // onSelect={this.changeColumns}
+ // setIsEditing={this.setHeaderIsEditing}
+ // deleteColumn={this.deleteColumn}
+ // onlyShowOptions={false}
+ // setColumnType={this.setColumnType}
+ // setColumnSort={this.setColumnSort}
+ // setColumnColor={this.setColumnColor}
+ // />
+ // </div>;
+
+
+ // <CollectionSchemaHeader
+ // keyValue={col}
+ // possibleKeys={possibleKeys}
+ // existingKeys={this.columns.map(c => c.heading)}
+ // keyType={this.getColumnType(col)}
+ // typeConst={columnTypes.get(col.heading) !== undefined}
+ // onSelect={this.changeColumns}
+ // setIsEditing={this.setHeaderIsEditing}
+ // deleteColumn={this.deleteColumn}
+ // setColumnType={this.setColumnType}
+ // setColumnSort={this.setColumnSort}
+ // setColumnColor={this.setColumnColor}
+ // />;
+
return {
Header: <MovableColumn columnRenderer={header} columnValue={col} allColumns={this.columns} reorderColumns={this.reorderColumns} ScreenToLocalTransform={this.props.ScreenToLocalTransform} />,
@@ -347,6 +1230,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
setPreviewDoc: this.props.setPreviewDoc,
setComputed: this.setComputed,
getField: this.getField,
+ showDoc: this.showDoc,
};
const colType = this.getColumnType(col);
@@ -354,6 +1238,8 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
if (colType === ColumnType.String) return <CollectionSchemaStringCell {...props} />;
if (colType === ColumnType.Boolean) return <CollectionSchemaCheckboxCell {...props} />;
if (colType === ColumnType.Doc) return <CollectionSchemaDocCell {...props} />;
+ if (colType === ColumnType.Image) return <CollectionSchemaImageCell {...props} />;
+ if (colType === ColumnType.List) return <CollectionSchemaListCell {...props} />;
return <CollectionSchemaCell {...props} />;
},
minWidth: 200,
@@ -403,7 +1289,8 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
rowFocused: !this._headerIsEditing && rowInfo.index === this._focusedCell.row && this.props.isFocused(this.props.Document),
textWrapRow: this.toggleTextWrapRow,
rowWrapped: this.textWrappedRows.findIndex(id => rowInfo.original[Id] === id) > -1,
- dropAction: StrCast(this.props.Document.childDropAction)
+ dropAction: StrCast(this.props.Document.childDropAction),
+ addDocTab: this.props.addDocTab
};
}
@@ -751,10 +1638,62 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
return false;
}
+ @action
+ showDoc = (doc: Doc | undefined, dataDoc?: Doc, screenX?: number, screenY?: number) => {
+ this._showDoc = doc;
+ if (dataDoc && screenX && screenY) {
+ this._showDocPos = this.props.ScreenToLocalTransform().transformPoint(screenX, screenY);
+ }
+ }
+
+ onOpenClick = () => {
+ if (this._showDoc) {
+ this.props.addDocTab(this._showDoc, "onRight");
+ }
+ }
+
+ getPreviewTransform = (): Transform => {
+ return this.props.ScreenToLocalTransform().translate(- this.borderWidth - 4 - this.tableWidth, - this.borderWidth);
+ }
+
render() {
+ const preview = "";
return <div className="collectionSchemaView-table" onPointerDown={this.onPointerDown} onWheel={e => this.props.active(true) && e.stopPropagation()} onDrop={e => this.props.onDrop(e, {})} onContextMenu={this.onContextMenu} >
{this.reactTable}
<div className="collectionSchemaView-addRow" onClick={() => this.createRow()}>+ new</div>
+ {!this._showDoc ? (null) :
+ <div className="collectionSchemaView-documentPreview" //onClick={() => { this.onOpenClick(); }}
+ style={{
+ position: "absolute", width: 150, height: 150,
+ background: "dimGray", display: "block", top: 0, left: 0,
+ transform: `translate(${this._showDocPos[0]}px, ${this._showDocPos[1] - 180}px)`
+ }}
+ ref="overlay"><ContentFittingDocumentView
+ Document={this._showDoc}
+ DataDoc={this._showDataDoc}
+ NativeHeight={returnZero}
+ NativeWidth={returnZero}
+ fitToBox={true}
+ FreezeDimensions={true}
+ focus={emptyFunction}
+ LibraryPath={emptyPath}
+ renderDepth={this.props.renderDepth}
+ rootSelected={() => false}
+ PanelWidth={() => 150}
+ PanelHeight={() => 150}
+ ScreenToLocalTransform={this.getPreviewTransform}
+ docFilters={returnEmptyFilter}
+ ContainingCollectionDoc={this.props.CollectionView?.props.Document}
+ ContainingCollectionView={this.props.CollectionView}
+ moveDocument={this.props.moveDocument}
+ parentActive={this.props.active}
+ whenActiveChanged={emptyFunction}
+ addDocTab={this.props.addDocTab}
+ pinToPres={this.props.pinToPres}
+ bringToFront={returnFalse}
+ ContentScaling={returnOne}>
+ </ContentFittingDocumentView>
+ </div>}
</div>;
}
} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-12 17:31:51 +0000