diff options
| -rw-r--r-- | deploy/index.html | 2 | ||||
| -rw-r--r-- | package-lock.json | 239 | ||||
| -rw-r--r-- | package.json | 7 | ||||
| -rw-r--r-- | src/client/views/DocumentDecorations.tsx | 4 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionSchemaView.scss | 66 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionSchemaView.tsx | 68 |
6 files changed, 373 insertions, 13 deletions
diff --git a/deploy/index.html b/deploy/index.html index e0892662a..94699126c 100644 --- a/deploy/index.html +++ b/deploy/index.html @@ -3,6 +3,8 @@ <head> <title>Dash Web</title> <link href="https://fonts.googleapis.com/css?family=Fjalla+One|Hind+Siliguri:300" rel="stylesheet"> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" + integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/3.3.1/typescript.min.js"></script> </head> diff --git a/package-lock.json b/package-lock.json index 5b9cb598d..3d66773f2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -174,6 +174,52 @@ "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz", "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==" }, + "@react-bootstrap/react-popper": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@react-bootstrap/react-popper/-/react-popper-1.2.1.tgz", + "integrity": "sha512-4l3q7LcZEhrSkI4d3Ie3g4CdrXqqTexXX4PFT45CB0z5z2JUbaxgRwKNq7r5j2bLdVpZm+uvUGqxJw8d9vgbJQ==", + "requires": { + "babel-runtime": "6.x.x", + "create-react-context": "^0.2.1", + "popper.js": "^1.14.4", + "prop-types": "^15.6.1", + "typed-styles": "^0.0.5", + "warning": "^3.0.0" + } + }, + "@trendmicro/react-buttons": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/@trendmicro/react-buttons/-/react-buttons-1.3.1.tgz", + "integrity": "sha512-9zvt/fdkqCb9kxUdZnvTZKmbmykM2wDQ3VEJFtztGcKAkm4Wkq4oZOQLJXKfUQ1vX3w+YDJob18LkNOzaHI1UQ==", + "requires": { + "classnames": "^2.2.5", + "prop-types": "^15.5.8" + } + }, + "@trendmicro/react-dropdown": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@trendmicro/react-dropdown/-/react-dropdown-1.3.0.tgz", + "integrity": "sha512-KwL0ksEZPay7qNsiGcPQ3aGmyfJCcUuIjiD9HZs6L66ScwSRoFkDlAjMTlRVLFcYVNhpuyUH4pPiFlKQQzDHGQ==", + "requires": { + "@trendmicro/react-buttons": "^1.3.0", + "chained-function": "^0.5.0", + "classnames": "^2.2.5", + "dom-helpers": "^3.3.1", + "prop-types": "^15.6.0", + "uncontrollable": "^5.0.0", + "warning": "^3.0.0" + }, + "dependencies": { + "uncontrollable": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-5.1.0.tgz", + "integrity": "sha512-5FXYaFANKaafg4IVZXUNtGyzsnYEvqlr9wQ3WpZxFpEUxl29A3H6Q4G1Dnnorvq9TGOGATBApWR4YpLAh+F5hw==", + "requires": { + "invariant": "^2.2.4" + } + } + } + }, "@types/anymatch": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz", @@ -1531,6 +1577,11 @@ } } }, + "bootstrap": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.3.1.tgz", + "integrity": "sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag==" + }, "boxen": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/boxen/-/boxen-1.3.0.tgz", @@ -1899,6 +1950,11 @@ "type-detect": "^4.0.5" } }, + "chained-function": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/chained-function/-/chained-function-0.5.0.tgz", + "integrity": "sha1-JWS73994AxlL6/daayvQQe3iOzo=" + }, "character-parser": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/character-parser/-/character-parser-2.2.0.tgz", @@ -3461,6 +3517,20 @@ "websocket-driver": ">=0.5.1" } }, + "fbjs": { + "version": "0.8.17", + "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz", + "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=", + "requires": { + "core-js": "^1.0.0", + "isomorphic-fetch": "^2.1.1", + "loose-envify": "^1.0.0", + "object-assign": "^4.1.0", + "promise": "^7.1.1", + "setimmediate": "^1.0.5", + "ua-parser-js": "^0.7.18" + } + }, "figgy-pudding": { "version": "3.5.1", "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz", @@ -3735,14 +3805,12 @@ "balanced-match": { "version": "1.0.0", "resolved": false, - "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", - "optional": true + "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=" }, "brace-expansion": { "version": "1.1.11", "resolved": false, "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -3762,8 +3830,7 @@ "concat-map": { "version": "0.0.1", "resolved": false, - "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", - "optional": true + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" }, "console-control-strings": { "version": "1.1.0", @@ -3911,7 +3978,6 @@ "version": "3.0.4", "resolved": false, "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -4927,6 +4993,14 @@ "integrity": "sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==", "dev": true }, + "invariant": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", + "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "invert-kv": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz", @@ -5440,6 +5514,11 @@ "resolved": "https://registry.npmjs.org/kareem/-/kareem-2.3.0.tgz", "integrity": "sha512-6hHxsp9e6zQU8nXsP+02HGWXwTkOEw6IROhF2ZA28cYbUk4eJ6QbtZvdqZOdD9YPKghG3apk5eOCvs+tLl3lRg==" }, + "keycode": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz", + "integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ=" + }, "killable": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz", @@ -9983,6 +10062,11 @@ } } }, + "popper.js": { + "version": "1.14.7", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.7.tgz", + "integrity": "sha512-4q1hNvoUre/8srWsH7hnoSJ5xVmIL4qgz+s4qf2TnJIMyZFUFMGH+9vE7mXynAlHSZ/NdTmmow86muD0myUkVQ==" + }, "portfinder": { "version": "1.0.20", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.20.tgz", @@ -10168,6 +10252,15 @@ "react-is": "^16.8.1" } }, + "prop-types-extra": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.0.tgz", + "integrity": "sha512-QFyuDxvMipmIVKD2TwxLVPzMnO4e5oOf1vr3tJIomL8E7d0lr6phTHd5nkPhFIzTD1idBLLEPeylL9g+rrTzRg==", + "requires": { + "react-is": "^16.3.2", + "warning": "^3.0.0" + } + }, "prosemirror-commands": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.0.7.tgz", @@ -10605,6 +10698,43 @@ "scheduler": "^0.13.4" } }, + "react-bootstrap": { + "version": "1.0.0-beta.5", + "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.0.0-beta.5.tgz", + "integrity": "sha512-Osm0OtTbYwfsT1rpu88ESWuAHZxfaHFNKFiW8w3w+6YY9/bLEPHbGRZA6W21fg5yvcuKN9hJKT857TTHgY7SoQ==", + "requires": { + "@babel/runtime": "^7.2.0", + "@react-bootstrap/react-popper": "1.2.1", + "classnames": "^2.2.6", + "dom-helpers": "^3.4.0", + "invariant": "^2.2.3", + "keycode": "^2.1.2", + "popper.js": "^1.14.6", + "prop-types": "^15.6.2", + "prop-types-extra": "^1.1.0", + "react-context-toolbox": "^2.0.2", + "react-overlays": "^1.0.0", + "react-prop-types": "^0.4.0", + "react-transition-group": "^2.5.1", + "uncontrollable": "^6.0.0", + "warning": "^4.0.1" + }, + "dependencies": { + "warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "requires": { + "loose-envify": "^1.0.0" + } + } + } + }, + "react-bootstrap-dropdown-menu": { + "version": "1.1.15", + "resolved": "https://registry.npmjs.org/react-bootstrap-dropdown-menu/-/react-bootstrap-dropdown-menu-1.1.15.tgz", + "integrity": "sha512-o35fODF4GsNxEzmnRWZuoe29a6x3fXqRsLXOlAvS4d+TvO3yoLTM8iZnSZpJCkHQnjOOWRnGvDh5tryqJCKZ0w==" + }, "react-color": { "version": "2.17.0", "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.17.0.tgz", @@ -10618,6 +10748,11 @@ "tinycolor2": "^1.4.1" } }, + "react-context-toolbox": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/react-context-toolbox/-/react-context-toolbox-2.0.2.tgz", + "integrity": "sha512-tY4j0imkYC3n5ZlYSgFkaw7fmlCp3IoQQ6DxpqeNHzcD0hf+6V+/HeJxviLUZ1Rv1Yn3N3xyO2EhkkZwHn0m1A==" + }, "react-dimensions": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/react-dimensions/-/react-dimensions-1.3.1.tgz", @@ -10714,6 +10849,31 @@ "threads": "^0.8.0" } }, + "react-overlays": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-1.2.0.tgz", + "integrity": "sha512-i/FCV8wR6aRaI+Kz/dpJhOdyx+ah2tN1RhT9InPrexyC4uzf3N4bNayFTGtUeQVacj57j1Mqh1CwV60/5153Iw==", + "requires": { + "classnames": "^2.2.6", + "dom-helpers": "^3.4.0", + "prop-types": "^15.6.2", + "prop-types-extra": "^1.1.0", + "react-context-toolbox": "^2.0.2", + "react-popper": "^1.3.2", + "uncontrollable": "^6.0.0", + "warning": "^4.0.2" + }, + "dependencies": { + "warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "requires": { + "loose-envify": "^1.0.0" + } + } + } + }, "react-pdf": { "version": "4.0.5", "resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-4.0.5.tgz", @@ -10791,6 +10951,51 @@ "resolved": "https://registry.npmjs.org/react-pointable/-/react-pointable-1.1.3.tgz", "integrity": "sha512-7skalWy38NLyKk1HcITmuloqCe2INPh69cFHbN7NcCn+Wfb0Ha4XGwGN0iVa4ZzqIHSqFRYOmV0loYNHrZ5/Sg==" }, + "react-popper": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.3.tgz", + "integrity": "sha512-ynMZBPkXONPc5K4P5yFWgZx5JGAUIP3pGGLNs58cfAPgK67olx7fmLp+AdpZ0+GoQ+ieFDa/z4cdV6u7sioH6w==", + "requires": { + "@babel/runtime": "^7.1.2", + "create-react-context": "<=0.2.2", + "popper.js": "^1.14.4", + "prop-types": "^15.6.1", + "typed-styles": "^0.0.7", + "warning": "^4.0.2" + }, + "dependencies": { + "create-react-context": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.2.tgz", + "integrity": "sha512-KkpaLARMhsTsgp0d2NA/R94F/eDLbhXERdIq3LvX2biCAXcDvHYoOqHfWCHf1+OLj+HKBotLG3KqaOOf+C1C+A==", + "requires": { + "fbjs": "^0.8.0", + "gud": "^1.0.0" + } + }, + "typed-styles": { + "version": "0.0.7", + "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz", + "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==" + }, + "warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "requires": { + "loose-envify": "^1.0.0" + } + } + } + }, + "react-prop-types": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/react-prop-types/-/react-prop-types-0.4.0.tgz", + "integrity": "sha1-+ZsL+0AGkpya8gUefBQUpcdbk9A=", + "requires": { + "warning": "^3.0.0" + } + }, "react-rnd": { "version": "7.4.3", "resolved": "https://registry.npmjs.org/react-rnd/-/react-rnd-7.4.3.tgz", @@ -10800,6 +11005,15 @@ "react-draggable": "^3.0.5" } }, + "react-simple-dropdown": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/react-simple-dropdown/-/react-simple-dropdown-3.2.3.tgz", + "integrity": "sha512-NmyyvA0D4wph5ctzkn8U4wmblOacavJMl9gTOhQR3v8I997mc1FL1NFKkj3Mx+HNysBKRD/HI+kpxXCAgXumPw==", + "requires": { + "classnames": "^2.1.2", + "prop-types": "^15.5.8" + } + }, "react-split-pane": { "version": "0.1.85", "resolved": "https://registry.npmjs.org/react-split-pane/-/react-split-pane-0.1.85.tgz", @@ -12453,6 +12667,11 @@ "mime-types": "~2.1.18" } }, + "typed-styles": { + "version": "0.0.5", + "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.5.tgz", + "integrity": "sha512-ht+rEe5UsdEBAa3gr64+QjUOqjOLJfWLvl5HZR5Ev9uo/OnD3p43wPeFSB1hNFc13GXQF/JU1Bn0YHLUqBRIlw==" + }, "typedarray": { "version": "0.0.6", "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", @@ -12526,6 +12745,14 @@ "random-bytes": "~1.0.0" } }, + "uncontrollable": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-6.1.0.tgz", + "integrity": "sha512-2TzEm0pLKauMBZfAZXsgQvLpZHEp95891frCZdGDrSG7dWYaIQhedwLAzi0X8pR8KHNqlmuYEb2cEgbQzr050A==", + "requires": { + "invariant": "^2.2.4" + } + }, "undefsafe": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.2.tgz", diff --git a/package.json b/package.json index 3bbaf72ad..3a1928632 100644 --- a/package.json +++ b/package.json @@ -35,9 +35,10 @@ "dependencies": { "@fortawesome/fontawesome-free-solid": "^5.0.13", "@fortawesome/fontawesome-svg-core": "^1.2.15", - "@hig/flyout": "^1.0.3", "@fortawesome/free-solid-svg-icons": "^5.7.2", "@fortawesome/react-fontawesome": "^0.1.4", + "@hig/flyout": "^1.0.3", + "@trendmicro/react-dropdown": "^1.3.0", "@types/bcrypt-nodejs": "0.0.30", "@types/bluebird": "^3.5.25", "@types/body-parser": "^1.17.0", @@ -78,6 +79,7 @@ "bcrypt-nodejs": "0.0.3", "bluebird": "^3.5.3", "body-parser": "^1.18.3", + "bootstrap": "^4.3.1", "connect-mongo": "^2.0.3", "express": "^4.16.4", "express-flash": "0.0.2", @@ -116,6 +118,8 @@ "pug": "^2.0.3", "raw-loader": "^1.0.0", "react": "^16.8.4", + "react-bootstrap": "^1.0.0-beta.5", + "react-bootstrap-dropdown-menu": "^1.1.15", "react-color": "^2.17.0", "react-dimensions": "^1.3.1", "react-dom": "^16.8.4", @@ -127,6 +131,7 @@ "react-pdf": "^4.0.2", "react-pdf-highlighter": "^2.1.2", "react-pdf-js": "^4.0.2", + "react-simple-dropdown": "^3.2.3", "react-split-pane": "^0.1.85", "react-table": "^6.9.2", "request": "^2.88.0", 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 > ) |