aboutsummaryrefslogtreecommitdiff
path: root/src/client/views
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views')
-rw-r--r--src/client/views/collections/CollectionSchemaView.scss27
-rw-r--r--src/client/views/collections/CollectionSchemaView.tsx48
2 files changed, 41 insertions, 34 deletions
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index c1d25f437..dc6ca060d 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -13,9 +13,12 @@
// overflow: hidden;
// overflow-x: scroll;
// border: none;
- overflow: scroll;
+ // overflow: scroll;
// overflow-y: scroll;
transition: top 0.5s;
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: nowrap;
// .collectionSchemaView-cellContents {
// height: $MAX_ROW_HEIGHT;
@@ -26,10 +29,16 @@
// }
// }
+ .collectionSchemaView-tableContainer {
+ width: 100%;
+ height: 100%;
+ overflow: scroll;
+ }
+
.collectionSchemaView-previewRegion {
position: relative;
background: $light-color;
- float: left;
+ // float: left;
height: 100%;
.collectionSchemaView-previewDoc {
@@ -53,7 +62,7 @@
.collectionSchemaView-dividerDragger {
position: relative;
- float: left;
+ // float: left;
height: 100%;
width: 20px;
z-index: 20;
@@ -74,6 +83,7 @@
background: white;
box-sizing: border-box;
border: none !important;
+ float: none !important;
.rt-table {
// overflow-y: auto;
@@ -526,4 +536,15 @@ button.add-column {
left: 50%;
transform: translate(-50%, -50%);
}
+}
+
+.collectionSchemaView-addRow {
+ color: gray;
+ letter-spacing: 2px;
+ text-transform: uppercase;
+ cursor: pointer;
+ font-size: 10.5px;
+ padding: 10px;
+ margin-left: 50px;
+ margin-top: 10px;
} \ No newline at end of file
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 2ce6f1be3..0f9c9ca51 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -122,8 +122,14 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
@action
onDividerMove = (e: PointerEvent): void => {
let nativeWidth = this._mainCont!.getBoundingClientRect();
- this.props.Document.schemaPreviewWidth = Math.min(nativeWidth.right - nativeWidth.left - 40,
- this.props.ScreenToLocalTransform().transformDirection(nativeWidth.right - e.clientX, 0)[0]);
+ console.log("divider", nativeWidth.right - nativeWidth.left, this.props.ScreenToLocalTransform().transformDirection(nativeWidth.right - e.clientX, 0)[0]);
+ let minWidth = 40;
+ let maxWidth = 1000;
+ let movedWidth = this.props.ScreenToLocalTransform().transformDirection(nativeWidth.right - e.clientX, 0)[0];
+ let width = movedWidth < minWidth ? minWidth : movedWidth > maxWidth ? maxWidth : movedWidth;
+ this.props.Document.schemaPreviewWidth = width;
+ // this.props.Document.schemaPreviewWidth = Math.min(nativeWidth.right - nativeWidth.left - 40,
+ // this.props.ScreenToLocalTransform().transformDirection(nativeWidth.right - e.clientX, 0)[0]);
}
@action
onDividerUp = (e: PointerEvent): void => {
@@ -237,9 +243,10 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
// if (SelectionManager.SelectedDocuments().length > 0) console.log(StrCast(SelectionManager.SelectedDocuments()[0].Document.title));
// if (DocumentManager.Instance.getDocumentView(this.props.Document)) console.log(StrCast(this.props.Document.title), SelectionManager.IsSelected(DocumentManager.Instance.getDocumentView(this.props.Document)!))
return (
- <div className="collectionSchemaView-container" style={{ height: this.chromeCollapsed ? "100%" : "calc(100% - 70px" }}
- onPointerDown={this.onPointerDown} onWheel={this.onWheel} onDrop={(e: React.DragEvent) => this.onDrop(e, {})} ref={this.createTarget}>
- {this.schemaTable}
+ <div className="collectionSchemaView-container" style={{ height: this.chromeCollapsed ? "100%" : "calc(100% - 70px" }}>
+ <div className="collectionSchemaView-tableContainer" onPointerDown={this.onPointerDown} onWheel={this.onWheel} onDrop={(e: React.DragEvent) => this.onDrop(e, {})} ref={this.createTarget}>
+ {this.schemaTable}
+ </div>
{this.dividerDragger}
{!this.previewWidth() ? (null) : this.previewPanel}
</div>
@@ -280,8 +287,6 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
@observable _focusedCell: { row: number, col: number } = { row: 0, col: 0 };
@observable _sortedColumns: Map<string, { id: string, desc: boolean }> = new Map();
@observable _openCollections: Array<string> = [];
- // @observable _textWrappedRows: Array<string> = [];
- @observable private _node: HTMLDivElement | null = null;
@computed get previewWidth() { return () => NumCast(this.props.Document.schemaPreviewWidth); }
@computed get previewHeight() { return () => this.props.PanelHeight() - 2 * this.borderWidth; }
@@ -321,8 +326,6 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
let focusedCol = this._focusedCell.col;
let isEditable = !this._headerIsEditing;// && this.props.isSelected();
- // let cdoc = this.props.dataDoc ? this.props.dataDoc : this.props.Document;
- // let children = DocListCast(cdoc[this.props.fieldKey]);
let children = this.childDocs;
if (children.reduce((found, doc) => found || doc.type === "collection", false)) {
@@ -587,7 +590,6 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
@action
deleteColumn = (key: string) => {
let columns = this.columns;
- // let list = Cast(this.props.Document.schemaColumns, listSpec(SchemaHeaderField));
if (columns === undefined) {
this.columns = new List<SchemaHeaderField>([]);
} else {
@@ -601,10 +603,8 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
@action
changeColumns = (oldKey: string, newKey: string, addNew: boolean) => {
- // let list = Cast(this.props.Document.schemaColumns, listSpec(SchemaHeaderField));
let columns = this.columns;
if (columns === undefined) {
- // console.log("change columns new");
this.columns = new List<SchemaHeaderField>([new SchemaHeaderField(newKey, "f1efeb")]);
} else {
if (addNew) {
@@ -689,7 +689,6 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
columns.splice(newIndex, 0, columns.splice(oldIndex, 1)[0]);
this.columns = columns;
- // this.setColumns(columns);
}
@action
@@ -703,9 +702,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
}
get documentKeys() {
- const docs = DocListCast(this.props.Document[this.props.fieldKey]);
-
- // let docs = this.childDocs;
+ let docs = this.childDocs;
let 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
@@ -736,12 +733,10 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
@computed
get reactTable() {
-
- // let cdoc = this.props.dataDoc ? this.props.dataDoc : this.props.Document;
- // let children = DocListCast(cdoc[this.props.fieldKey]);
let children = this.childDocs;
let previewWidth = this.previewWidth(); // + 2 * this.borderWidth + this.DIVIDER_WIDTH + 1;
+ console.log(previewWidth);
let hasCollectionChild = children.reduce((found, doc) => found || doc.type === "collection", false);
let expandedRowsList = this._openCollections.map(col => children.findIndex(doc => doc[Id] === col).toString());
let expanded = {};
@@ -750,7 +745,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
console.log("text wrapped rows", ...[...this.textWrappedRows]); // TODO: get component to rerender on text wrap change without needign to console.log :((((
return <ReactTable
- style={{ position: "relative", float: "left", width: `calc(100% - ${previewWidth}px` }}
+ style={{ position: "relative" }}
data={children}
page={0}
pageSize={children.length}
@@ -765,7 +760,6 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
SubComponent={hasCollectionChild ?
row => {
if (row.original.type === "collection") {
- // let childDocs = DocListCast(row.original[this.props.fieldKey]);
return <div className="sub"><SchemaTable {...this.props} Document={row.original} childDocs={undefined} /></div>;
}
}
@@ -785,8 +779,6 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
let csv: string = this.columns.reduce((val, col) => val + col + ",", "");
csv = csv.substr(0, csv.length - 1) + "\n";
let self = this;
- let cdoc = this.props.dataDoc ? this.props.dataDoc : this.props.Document;
- // let children = DocListCast(cdoc[this.props.fieldKey]);
this.childDocs.map(doc => {
csv += self.columns.reduce((val, col) => val + (doc[col.heading] ? doc[col.heading]!.toString() : "0") + ",", "");
csv = csv.substr(0, csv.length - 1) + "\n";
@@ -804,11 +796,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
}
getField = (row: number, col?: number) => {
- // const docs = DocListCast(this.props.Document[this.props.fieldKey]);
-
- let cdoc = this.props.dataDoc ? this.props.dataDoc : this.props.Document;
- const docs = DocListCast(cdoc[this.props.fieldKey]);
- // let docs = this.childDocs;
+ let docs = this.childDocs;
row = row % docs.length;
while (row < 0) row += docs.length;
@@ -880,13 +868,11 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
}
render() {
- // if (SelectionManager.SelectedDocuments().length > 0) console.log(StrCast(SelectionManager.SelectedDocuments()[0].Document.title));
- // if (DocumentManager.Instance.getDocumentView(this.props.Document)) console.log(StrCast(this.props.Document.title), SelectionManager.IsSelected(DocumentManager.Instance.getDocumentView(this.props.Document)!))
return (
<div className="collectionSchemaView-table" onPointerDown={this.onPointerDown} onWheel={this.onWheel}
onDrop={(e: React.DragEvent) => this.props.onDrop(e, {})} onContextMenu={this.onContextMenu} >
{this.reactTable}
- <button onClick={() => this.createRow()}>new row</button>
+ <div className="collectionSchemaView-addRow" onClick={() => this.createRow()}>+ new</div>
</div>
);
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-04 06:24:08 +0000