row menu rework, icons mostly good

2 files changed, 58 insertions, 52 deletions

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 6b97cb97c..30daa793a 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -7,11 +7,11 @@ import * as React from 'react';
 import { returnEmptyDoclist, returnEmptyString, returnFalse, returnIgnore, returnNever, returnTrue, setupMoveUpEvents, smoothScroll } from '../../../../ClientUtils';
 import { emptyFunction } from '../../../../Utils';
 import { Doc, DocListCast, Field, FieldType, IdToDoc, NumListCast, Opt, StrListCast } from '../../../../fields/Doc';
-import { DocData } from '../../../../fields/DocSymbols';
+import { AclPrivate, DocData } from '../../../../fields/DocSymbols';
 import { Id } from '../../../../fields/FieldSymbols';
 import { List } from '../../../../fields/List';
 import { ColumnType } from '../../../../fields/SchemaHeaderField';
-import { BoolCast, NumCast, StrCast } from '../../../../fields/Types';
+import { BoolCast, Cast, NumCast, StrCast } from '../../../../fields/Types';
 import { DocUtils } from '../../../documents/DocUtils';
 import { Docs, DocumentOptions, FInfo } from '../../../documents/Documents';
 import { DragManager } from '../../../util/DragManager';
@@ -34,6 +34,9 @@ import { SchemaRowBox } from './SchemaRowBox';
 import { ActionButton } from '@adobe/react-spectrum';
 import { CollectionMasonryViewFieldRow } from '../CollectionMasonryViewFieldRow';
 import { Func } from 'mocha';
+import { CollectionView } from '../CollectionView';
+import { listSpec } from '../../../../fields/Schema';
+import { GetEffectiveAcl } from '../../../../fields/util';
 
 const { SCHEMA_NEW_NODE_HEIGHT } = require('../../global/globalCssVariables.module.scss'); // prettier-ignore
 
@@ -635,6 +638,19 @@ export class CollectionSchemaView extends CollectionSubView() {
         return undefined;
     };
 
+    addDocsFromChildCollection = (collection: CollectionSchemaView) => {
+        const childDocs = collection.childDocs.slice();
+        console.log(childDocs)
+        childDocs.forEach((doc: Doc) => {!this.childDocs.includes(doc) && this._lentDocs.push(doc)});
+    }
+
+    removeChildCollectionDocs = (collection: CollectionSchemaView) => {
+        const children = collection.childDocs.slice();
+        this._lentDocs.forEach(element => {
+            
+        });
+    }
+
     @computed get fieldDefaultInput() {
         switch (this._newFieldType) {
             case ColumnType.Number:
@@ -746,9 +762,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         this._columnMenuIndex = index;
         this._menuValue = '';
         this._menuKeys = this.documentKeys;
-        this._makeNewField = false;
         this._newFieldWarning = '';
-        this._makeNewField = false;
         this._makeNewColumn = newCol;
     };
 
@@ -920,7 +934,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         const x = this._columnMenuIndex! === -1 ? 0 : this.displayColumnWidths.reduce((total, curr, index) => total + (index < this._columnMenuIndex! ? curr : 0), CollectionSchemaView._rowMenuWidth);
         return (
             <div className="schema-column-menu" style={{ left: x, minWidth: CollectionSchemaView._minColWidth }}>
-                {this._makeNewField ? this.newFieldMenu : this.keysDropdown}
+                {this.keysDropdown}
             </div>
         );
     }
@@ -928,7 +942,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     get renderKeysMenu() {
         return (
             <div className="schema-column-menu" style={{ left: 0, minWidth: CollectionSchemaView._minColWidth }}>
-                {this._makeNewField ? this.newFieldMenu : this.keysDropdown}
+                {this.keysDropdown}
             </div>
         );
     }
@@ -954,7 +968,7 @@ export class CollectionSchemaView extends CollectionSubView() {
             }
             return (
                 <div key={key} className="schema-filter-option">
-                    <input //
+                    <input 
                         type="checkbox"
                         onPointerDown={e => e.stopPropagation()}
                         onClick={e => e.stopPropagation()}
@@ -1025,11 +1039,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     screenToLocal = () => this.ScreenToLocalBoxXf().translate(-this.tableWidth, 0);
     previewWidthFunc = () => this.previewWidth;
     onPassiveWheel = (e: WheelEvent) => e.stopPropagation();
-    displayedDocsFunc = () => {
-        let docs: Doc[] = this._lentDocs.slice();
-        docs = docs.concat(this.sortedDocs.docs);
-        return docs;
-    }
+    displayedDocsFunc = () => this._lentDocs.slice().concat(this.sortedDocs.docs);
     _oldWheel: any;
     render() {
         return (
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index da272cd18..8e4161413 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -1,9 +1,9 @@
 import { IconButton, Size } from 'browndash-components';
-import { computed, makeObservable } from 'mobx';
+import { computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { computedFn } from 'mobx-utils';
 import * as React from 'react';
-import { CgClose, CgLock, CgLockUnlock } from 'react-icons/cg';
+import { CgClose, CgLock, CgLockUnlock, CgMenu } from 'react-icons/cg';
 import { FaExternalLinkAlt } from 'react-icons/fa';
 import { returnFalse, setupMoveUpEvents } from '../../../../ClientUtils';
 import { emptyFunction } from '../../../../Utils';
@@ -18,6 +18,8 @@ import { OpenWhere } from '../../nodes/OpenWhere';
 import { CollectionSchemaView } from './CollectionSchemaView';
 import './CollectionSchemaView.scss';
 import { SchemaTableCell } from './SchemaTableCell';
+import { ContextMenu } from '../../ContextMenu';
+import { CollectionFreeFormView } from '../collectionFreeForm';
 
 interface SchemaRowBoxProps extends FieldViewProps {
     rowIndex: number;
@@ -28,6 +30,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
         return FieldView.LayoutString(SchemaRowBox, fieldKey).replace('fieldKey', `rowIndex={${rowIndex}} fieldKey`);
     }
     private _ref: HTMLDivElement | null = null;
+    @observable _childrenAddedToSchema: boolean = false;
 
     constructor(props: SchemaRowBoxProps) {
         super(props);
@@ -52,6 +55,33 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
         this._props.setContentViewBox?.(this);
     }
 
+    openContextMenu = (x: number, y: number) => {
+        ContextMenu.Instance.clearItems();
+        ContextMenu.Instance.addItem({
+            description: `Close doc`,
+            event: () => this._props.removeDocument?.(this.Document),
+            icon: 'minus',
+        });
+        ContextMenu.Instance.addItem({
+            description: this.Document._lockedPosition ? 'Unlock doc interactions' : 'Lock doc interactions',
+            event: () => Doc.toggleLockedPosition(this.Document),
+            icon: this.Document._lockedPosition ? 'lock-open' : 'lock',
+        });
+        ContextMenu.Instance.addItem({
+            description: 'Open preview',
+            event: () => this._props.addDocTab(this.Document, OpenWhere.addRight),
+            icon: 'magnifying-glass',
+        });
+        if (this.Document['type'] === 'collection') {
+                ContextMenu.Instance.addItem({
+                description: 'Add children to schema',
+                event: () => this.schemaView.addDocsFromChildCollection(this.Document as unknown as CollectionSchemaView),
+                icon: 'plus',
+            });
+        }
+        ContextMenu.Instance.displayMenu(x, y, undefined, false);
+    }
+
     cleanupField = (field: string) => this.schemaView.cleanupComputedField(field)
     setCursorIndex = (mouseY: number) => this.schemaView?.setRelCursorIndex(mouseY);
     selectedCol = () => this.schemaView._selectedCol;
@@ -78,42 +108,8 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
                         pointerEvents: !this._props.isContentActive() ? 'none' : undefined,
                     }}>
                     <IconButton
-                        tooltip="close"
-                        icon={<CgClose size="16px" />}
-                        size={Size.XSMALL}
-                        onPointerDown={e =>
-                            setupMoveUpEvents(
-                                this,
-                                e,
-                                returnFalse,
-                                emptyFunction,
-                                undoable(clickEv => {
-                                    clickEv.stopPropagation();
-                                    this._props.removeDocument?.(this.Document);
-                                }, 'Delete Row')
-                            )
-                        }
-                    />
-                    <IconButton
-                        tooltip="whether document interactions are enabled"
-                        icon={this.Document._lockedPosition ? <CgLockUnlock size="12px" /> : <CgLock size="12px" />}
-                        size={Size.XSMALL}
-                        onPointerDown={e =>
-                            setupMoveUpEvents(
-                                this,
-                                e,
-                                returnFalse,
-                                emptyFunction,
-                                undoable(clickEv => {
-                                    clickEv.stopPropagation();
-                                    Doc.toggleLockedPosition(this.Document);
-                                }, 'toggle document lock')
-                            )
-                        }
-                    />
-                    <IconButton
-                        tooltip="open preview"
-                        icon={<FaExternalLinkAlt />}
+                        tooltip="Open actions menu"
+                        icon={ <CgMenu size="12px" /> }
                         size={Size.XSMALL}
                         onPointerDown={e =>
                             setupMoveUpEvents(
@@ -123,8 +119,8 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
                                 emptyFunction,
                                 undoable(clickEv => {
                                     clickEv.stopPropagation();
-                                    this._props.addDocTab(this.Document, OpenWhere.addRight);
-                                }, 'Open schema Doc preview')
+                                    this.openContextMenu(e.clientX, e.clientY)
+                                }, 'open actions menu')
                             )
                         }
                     />