aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/DocumentDecorations.tsx4
-rw-r--r--src/client/views/collections/CollectionSchemaView.scss66
-rw-r--r--src/client/views/collections/CollectionSchemaView.tsx68
3 files changed, 132 insertions, 6 deletions
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index dc62f97cf..1aa6d1936 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -10,8 +10,8 @@ import { DragManager } from "../util/DragManager";
import { LinkMenu } from "./nodes/LinkMenu";
import { ListField } from "../../fields/ListField";
const higflyout = require("@hig/flyout");
-const { anchorPoints } = higflyout;
-const Flyout = higflyout.default;
+export const { anchorPoints } = higflyout;
+export const Flyout = higflyout.default;
@observer
export class DocumentDecorations extends React.Component {
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index d40e6d314..ab906cf4b 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -1,5 +1,65 @@
+//options menu styling
+#schemaOptionsMenuBtn {
+ position: absolute;
+ height: 15px;
+ width: 15px;
+ border-radius: 50%;
+ z-index: 21;
+ right: 3px;
+ top: 3px;
+ pointer-events: auto;
+ background-color:red;
+}
+
+.dd-item-containter:hover {
+ background-color: rgb(204, 204, 204);
+}
+
+.dd-item {
+ color: black;
+ padding-left: 6px;
+ padding-bottom: 0px;
+ padding-top: 4px;
+ font-size: 12px;
+ margin: 0px;
+ display: block;
+ width: 100%;
+ height: 25px;
+ z-index: 100;
+}
+.dd-item:hover {
+ color: black;
+ font-weight: 500;
+}
+
+.dropdown-menu {
+ height: 100px;
+ overflow-y: scroll;
+ }
+#dropdown-basic-button {
+ background-color: #fff;
+ border: .75px solid #bbbbbb;
+ border-radius: 0;
+ -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+ margin:10px;
+ margin-top: 8px;
+ color: black;
+ display: inline-block;
+ width: 160px;
+ height: 25px;
+ font-size: 15px;
+ padding: 0px;
+ border-radius: 3px;
+ font-size: 12px;
+ }
+ #options-flyout-div {
+ text-align: center;
+ padding:0px;
+ }
+
.collectionSchemaView-container {
border-style: solid;
box-sizing: border-box;
@@ -14,11 +74,11 @@
}
.collectionSchemaView-previewHandle {
position: absolute;
- height: 37px;
- width: 20px;
+ height: 15px;
+ width: 15px;
z-index: 20;
right: 0;
- top: 0;
+ top: 20px;
background: Black ;
}
.collectionSchemaView-dividerDragger{
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 04f017378..7c87ef744 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -1,4 +1,4 @@
-import React = require("react")
+import React = require("react");
import { action, observable } from "mobx";
import { observer } from "mobx-react";
import Measure from "react-measure";
@@ -17,6 +17,16 @@ import "./CollectionSchemaView.scss";
import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
import { CollectionViewBase } from "./CollectionViewBase";
import { setupDrag } from "../../util/DragManager";
+import '../DocumentDecorations.scss';
+import { Flyout, anchorPoints } from "../DocumentDecorations";
+import { DropdownButton, Dropdown } from 'react-bootstrap';
+import { ListField } from "../../../fields/ListField";
+import { Key } from "../../../fields/Key";
+//import { Server } from "http";
+//import { Server } from "http";
+import { Server } from "../../Server";
+
+//import { MenuItem } from 'react-bootstrap';
// bcz: need to add drag and drop of rows and columns. This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657
@@ -178,6 +188,19 @@ export class CollectionSchemaView extends CollectionViewBase {
focusDocument = (doc: Document) => { }
+ keyDropDownOnSelect = (keyId: string) => {
+ const columns = this.props.Document.GetList(KeyStore.ColumnsKey, [KeyStore.Title, KeyStore.Data, KeyStore.Author]);
+ const listOfFields = this.props.Document.GetList<Document>(this.props.fieldKey, [])[1].fields;
+ if (listOfFields.has(keyId)) {
+ let index = columns.push(listOfFields!.get(keyId)!.key);
+ this.props.Document.SetData(KeyStore.ColumnsKey, columns, ListField);
+ }
+ }
+
+ dropdownItemOnPointerDown = (e: React.PointerEvent): void => {
+ //(e.currentTarget.children[0] as Dropdown.Item ).onSelect();
+ }
+
render() {
const columns = this.props.Document.GetList(KeyStore.ColumnsKey, [KeyStore.Title, KeyStore.Data, KeyStore.Author])
const children = this.props.Document.GetList<Document>(this.props.fieldKey, []);
@@ -205,6 +228,47 @@ export class CollectionSchemaView extends CollectionViewBase {
<div className="collectionSchemaView-previewHandle" onPointerDown={this.onExpanderDown} />);
let dividerDragger = this._splitPercentage == 100 ? (null) :
<div className="collectionSchemaView-dividerDragger" onPointerDown={this.onDividerDown} style={{ width: `${this.DIVIDER_WIDTH}px` }} />
+
+ //get the union of all childrens' keys
+ let addFields: { id: string, name: string }[] = [];
+ let removeFields: { id: string, name: string }[] = [];
+ //children.forEach((child) => {
+ // for (var keyId in fields.keys) {
+ // if (!allFields.includes(keyId)) {
+ // allFields.push(keyId);
+ // }
+ // }
+ // });
+ let optionsMenu = null;
+ if (this.props.active()) {
+ let protos = this.props.Document.GetAllPrototypes();
+ for (const proto of protos) {
+ proto._proxies.forEach((val, key) => {
+ if (!(key in addFields.keys)) {
+ let this_name: string = proto.fields!.get(key)!.key.Name;
+ addFields.push({ id: key, name: this_name });
+ }
+ })
+ }
+ optionsMenu = !this.props.active() ? (null) : (<Flyout
+ anchorPoint={anchorPoints.LEFT_TOP}
+ content={<div id="options-flyout-div"> <h5>Options</h5>
+ <DropdownButton id="dropdown-basic-button" className="colDropDown" title="Add Column">
+ {addFields.map(({ id, name }) => (
+ <div className="dd-item-containter"><Dropdown.Item className="dd-item" eventKey={id} onSelect={this.keyDropDownOnSelect}>{name} </Dropdown.Item></div>))}
+ </DropdownButton>
+ <DropdownButton id="dropdown-basic-button" className="colDropDown" title="Remove Column">
+ {addFields.map(({ id, name }) => (
+ <div className="dd-item-containter"><Dropdown.Item className="dd-item" eventKey={id} onSelect={this.keyDropDownOnSelect}>{name} </Dropdown.Item></div>))}
+ </DropdownButton>
+ </div>
+ }>
+ <div id="schemaOptionsMenuBtn" />
+ </Flyout>);
+ }
+
+
+
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}>
@@ -239,6 +303,8 @@ export class CollectionSchemaView extends CollectionViewBase {
{content}
</div>
{previewHandle}
+ {optionsMenu}
+
</div>
</div >
)
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-09 01:28:22 +0000