aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/collections/CollectionSchemaView.scss393
-rw-r--r--src/client/views/collections/CollectionSchemaView.tsx42
-rw-r--r--src/fields/Document.ts5
3 files changed, 239 insertions, 201 deletions
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index 0d615dc01..37f4652a9 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -1,162 +1,201 @@
@import "../global_variables";
-
.collectionSchemaView-container {
- border: 1px solid $intermediate-color;
- border-radius: $border-radius;
- box-sizing: border-box;
- position: absolute;
- width: 100%;
- height: 100%;
- overflow: hidden;
-
-.collectionSchemaView-content {
- position: absolute;
- height:100%;
- width:100%;
- overflow:auto;
-}
- .collectionSchemaView-previewRegion {
- position: relative;
- background: $light-color;
- float: left;
- height: 100%;
- }
- .collectionSchemaView-previewHandle {
- position: absolute;
- height: 37px;
- width: 20px;
- z-index: 20;
- right: 0;
- top: 0;
- background: $main-accent;
- }
- .collectionSchemaView-dividerDragger {
- position: relative;
+ border: 1px solid $intermediate-color;
+ border-radius: $border-radius;
box-sizing: border-box;
- border-left: 1px solid $intermediate-color;
- border-right: 1px solid $intermediate-color;
- float: left;
- height: 100%;
- }
- .collectionSchemaView-tableContainer {
- position: relative;
- float: left;
- height: 100%;
- }
-
- .ReactTable {
position: absolute;
- // display: inline-block;
- // overflow: auto;
width: 100%;
height: 100%;
- background: $light-color;
- box-sizing: border-box;
- border: none !important;
- .rt-table {
- overflow-y: auto;
- overflow-x: auto;
- height: 100%;
- display: -webkit-inline-box;
- direction: ltr;
- // direction:rtl;
- // display:block;
- }
- .rt-tbody {
- //direction: ltr;
- direction: rtl;
- }
- .rt-tr-group {
- direction: ltr;
- max-height: 44px;
- }
- .rt-td {
- border-width: 1px;
- border-right-color: $intermediate-color;
- .imageBox-cont {
+ overflow: hidden;
+ .collectionSchemaView-content {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ overflow: auto;
+ }
+ .collectionSchemaView-previewRegion {
position: relative;
- max-height: 100%;
- }
- .imageBox-cont img {
- object-fit: contain;
- max-width: 100%;
+ background: $light-color;
+ float: left;
height: 100%;
- }
- .videobox-cont {
- object-fit: contain;
- width:auto;
+ }
+ .collectionSchemaView-previewHandle {
+ position: absolute;
+ height: 37px;
+ width: 20px;
+ z-index: 20;
+ right: 0;
+ top: 0;
+ background: $main-accent;
+ }
+ .collectionSchemaView-dividerDragger {
+ position: relative;
+ box-sizing: border-box;
+ border-left: 1px solid $intermediate-color;
+ border-right: 1px solid $intermediate-color;
+ float: left;
height: 100%;
- }
- }
- }
- .ReactTable .rt-thead.-header {
- background: $intermediate-color;
- color: $light-color;
- text-transform: uppercase;
- letter-spacing: 2px;
- font-size: 12px;
- height: 30px;
- padding-top: 4px;
- }
- .ReactTable .rt-th,
- .ReactTable .rt-td {
- max-height: 44;
- padding: 3px 7px;
- font-size: 13px;
- text-align: center;
- }
- .ReactTable .rt-tbody .rt-tr-group:last-child {
- border-bottom: $intermediate-color;
- border-bottom-style: solid;
- border-bottom-width: 1;
- }
- .documentView-node:first-child {
- background: $light-color;
- .imageBox-cont img {
- object-fit: contain;
- }
- }
+ }
+ .collectionSchemaView-tableContainer {
+ position: relative;
+ float: left;
+ height: 100%;
+ }
+ .ReactTable {
+ position: absolute; // display: inline-block;
+ // overflow: auto;
+ width: 100%;
+ height: 100%;
+ background: $light-color;
+ box-sizing: border-box;
+ border: none !important;
+ .rt-table {
+ overflow-y: auto;
+ overflow-x: auto;
+ height: 100%;
+ display: -webkit-inline-box;
+ direction: ltr; // direction:rtl;
+ // display:block;
+ }
+ .rt-tbody {
+ //direction: ltr;
+ direction: rtl;
+ }
+ .rt-tr-group {
+ direction: ltr;
+ max-height: 44px;
+ }
+ .rt-td {
+ border-width: 1px;
+ border-right-color: $intermediate-color;
+ .imageBox-cont {
+ position: relative;
+ max-height: 100%;
+ }
+ .imageBox-cont img {
+ object-fit: contain;
+ max-width: 100%;
+ height: 100%;
+ }
+ .videobox-cont {
+ object-fit: contain;
+ width: auto;
+ height: 100%;
+ }
+ }
+ }
+ .ReactTable .rt-thead.-header {
+ background: $intermediate-color;
+ color: $light-color;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ font-size: 12px;
+ height: 30px;
+ padding-top: 4px;
+ }
+ .ReactTable .rt-th,
+ .ReactTable .rt-td {
+ max-height: 44;
+ padding: 3px 7px;
+ font-size: 13px;
+ text-align: center;
+ }
+ .ReactTable .rt-tbody .rt-tr-group:last-child {
+ border-bottom: $intermediate-color;
+ border-bottom-style: solid;
+ border-bottom-width: 1;
+ }
+ .documentView-node:first-child {
+ background: $light-color;
+ .imageBox-cont img {
+ object-fit: contain;
+ }
+ }
}
.Resizer {
- box-sizing: border-box;
- background: #000;
- opacity: 0.5;
- z-index: 1;
- background-clip: padding-box;
- &.horizontal {
- height: 11px;
- margin: -5px 0;
- border-top: 5px solid rgba(255, 255, 255, 0);
- border-bottom: 5px solid rgba(255, 255, 255, 0);
- cursor: row-resize;
- width: 100%;
- &:hover {
- border-top: 5px solid rgba(0, 0, 0, 0.5);
- border-bottom: 5px solid rgba(0, 0, 0, 0.5);
- }
- }
- &.vertical {
- width: 11px;
- margin: 0 -5px;
- border-left: 5px solid rgba(255, 255, 255, 0);
- border-right: 5px solid rgba(255, 255, 255, 0);
- cursor: col-resize;
+ box-sizing: border-box;
+ background: #000;
+ opacity: 0.5;
+ z-index: 1;
+ background-clip: padding-box;
+ &.horizontal {
+ height: 11px;
+ margin: -5px 0;
+ border-top: 5px solid rgba(255, 255, 255, 0);
+ border-bottom: 5px solid rgba(255, 255, 255, 0);
+ cursor: row-resize;
+ width: 100%;
+ &:hover {
+ border-top: 5px solid rgba(0, 0, 0, 0.5);
+ border-bottom: 5px solid rgba(0, 0, 0, 0.5);
+ }
+ }
+ &.vertical {
+ width: 11px;
+ margin: 0 -5px;
+ border-left: 5px solid rgba(255, 255, 255, 0);
+ border-right: 5px solid rgba(255, 255, 255, 0);
+ cursor: col-resize;
+ &:hover {
+ border-left: 5px solid rgba(0, 0, 0, 0.5);
+ border-right: 5px solid rgba(0, 0, 0, 0.5);
+ }
+ }
&:hover {
- border-left: 5px solid rgba(0, 0, 0, 0.5);
- border-right: 5px solid rgba(0, 0, 0, 0.5);
- }
- }
- &:hover {
- -webkit-transition: all 2s ease;
- transition: all 2s ease;
- }
+ -webkit-transition: all 2s ease;
+ transition: all 2s ease;
+ }
}
.vertical {
- section {
- width: 100vh;
- height: 100vh;
+ section {
+ width: 100vh;
+ height: 100vh;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ }
+ header {
+ padding: 1rem;
+ background: #eee;
+ }
+ footer {
+ padding: 1rem;
+ background: #eee;
+ }
+}
+
+.horizontal {
+ section {
+ width: 100vh;
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ }
+ header {
+ padding: 1rem;
+ background: #eee;
+ }
+ footer {
+ padding: 1rem;
+ background: #eee;
+ }
+}
+
+.parent {
+ width: 100%;
+ height: 100%;
+ -webkit-box-flex: 1;
+ -webkit-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -166,71 +205,27 @@
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
- }
- header {
- padding: 1rem;
- background: #eee;
- }
- footer {
- padding: 1rem;
- background: #eee;
- }
-}
-
-.horizontal {
- section {
- width: 100vh;
- height: 100vh;
- display: flex;
- flex-direction: column;
- }
- header {
- padding: 1rem;
- background: #eee;
- }
- footer {
- padding: 1rem;
- background: #eee;
- }
-}
-
-.parent {
- width: 100%;
- height: 100%;
- -webkit-box-flex: 1;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
}
.header {
- background: #aaa;
- height: 3rem;
- line-height: 3rem;
+ background: #aaa;
+ height: 3rem;
+ line-height: 3rem;
}
.wrapper {
- background: #ffa;
- margin: 5rem;
- -webkit-box-flex: 1;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
+ background: #ffa;
+ margin: 5rem;
+ -webkit-box-flex: 1;
+ -webkit-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
}
.-even {
- background: $light-color !important;
+ background: $light-color !important;
}
.-odd {
- background: $light-color-secondary !important;
-}
+ background: $light-color-secondary !important;
+} \ No newline at end of file
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 8c1aeef2c..16432ebbc 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, computed } from "mobx";
+import { action, observable, ObservableMap, computed } 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 = 4;
+ @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;
@@ -103,6 +106,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 => {
@@ -180,7 +206,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) : (
@@ -206,6 +232,7 @@ export class CollectionSchemaView extends CollectionViewBase {
<div className="collectionSchemaView-previewHandle" onPointerDown={this.onExpanderDown} />);
let dividerDragger = this.splitPercentage == 0 ? (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}>
@@ -233,6 +260,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>
@@ -241,6 +278,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
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-29 21:55:39 +0000