Merge branch 'fieldSyntaxUpdate' into aarav_edit

1 files changed, 36 insertions, 27 deletions

diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index d404378eb..e6fe46638 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -40,7 +40,7 @@ import { SchemaCellField } from './SchemaCellField';
  */
 
 export interface SchemaTableCellProps {
-    Document: Doc;
+    Doc: Doc;
     col: number;
     deselectCell: () => void;
     selectCell: (doc: Doc, col: number, shift: boolean, ctrl: boolean) => void;
@@ -71,7 +71,7 @@ export interface SchemaTableCellProps {
 }
 
 function selectedCell(props: SchemaTableCellProps) {
-    return props.isRowActive() && props.selectedCol() === props.col && props.selectedCells()?.filter(d => d === props.Document)?.length;
+    return props.isRowActive() && props.selectedCol() === props.col && props.selectedCells()?.filter(d => d === props.Doc)?.length;
 }
 
 @observer
@@ -84,11 +84,11 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
         makeObservable(this);
     }
 
-    get docIndex(){return DocumentView.getDocViewIndex(this._props.Document);} // prettier-ignore
+    get docIndex(){return DocumentView.getDocViewIndex(this._props.Doc);} // prettier-ignore
 
     get isDefault(){return SchemaColumnHeader.isDefaultField(this._props.fieldKey);} // prettier-ignore
 
-    get lockedInteraction(){return (this.isDefault || this._props.Document._lockedSchemaEditing);} // prettier-ignore
+    get lockedInteraction(){return (this.isDefault || this._props.Doc._lockedSchemaEditing);} // prettier-ignore
 
     get backgroundColor() {
         if (this.lockedInteraction) {
@@ -102,7 +102,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
         return true;
     };
     public static renderProps(props: SchemaTableCellProps) {
-        const { Document, fieldKey, getFinfo, columnWidth, isRowActive } = props;
+        const { Doc: Document, fieldKey, /* getFinfo,*/ columnWidth, isRowActive } = props;
         let protoCount = 0;
         let doc: Doc | undefined = Document;
         while (doc) {
@@ -186,7 +186,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
         return (
             <div
                 className="schemacell-edit-wrapper"
-                // onContextMenu={}
+                tabIndex={1}
                 style={{
                     color,
                     textDecoration,
@@ -196,7 +196,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                 <SchemaCellField
                     fieldKey={this._props.fieldKey}
                     refSelectModeInfo={this._props.refSelectModeInfo}
-                    Document={this._props.Document}
+                    Doc={this._props.Doc}
                     highlightCells={(text: string) => this._props.highlightCells(this.adjustSelfReference(text))}
                     getCells={(text: string) => this._props.eqHighlightFunc(this.adjustSelfReference(text))}
                     ref={r => selectedCell(this._props) && this._props.autoFocus && r?.setIsFocused(true)}
@@ -224,7 +224,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
 
     get getCellType() {
         const columnTypeStr = this._props.getFinfo(this._props.fieldKey)?.fieldType;
-        const cellValue = this._props.Document[this._props.fieldKey];
+        const cellValue = this._props.Doc[this._props.fieldKey];
 
         if (cellValue instanceof ImageField) return ColumnType.Image;
         if (cellValue instanceof DateField) return ColumnType.Date;
@@ -252,15 +252,15 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
         const sides: Array<string | undefined> = [];
         sides[0] = selectedCell(this._props) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined; // left
         sides[1] = selectedCell(this._props) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined; // right
-        sides[2] = !this._props.isolatedSelection(this._props.Document)[0] && selectedCell(this._props) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined; // top
-        sides[3] = !this._props.isolatedSelection(this._props.Document)[1] && selectedCell(this._props) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined; // bottom
+        sides[2] = !this._props.isolatedSelection(this._props.Doc)[0] && selectedCell(this._props) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined; // top
+        sides[3] = !this._props.isolatedSelection(this._props.Doc)[1] && selectedCell(this._props) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined; // bottom
         return sides;
     }
 
     render() {
         return (
             <div
-                className="schema-table-cell"
+                className={`schema-table-cell${selectedCell(this._props) ? '-selected' : ''}`}
                 onContextMenu={e => StopEvent(e)}
                 onPointerDown={action(e => {
                     if (this.lockedInteraction) {
@@ -272,7 +272,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                     if (this._props.refSelectModeInfo.enabled && !selectedCell(this._props)) {
                         e.stopPropagation();
                         e.preventDefault();
-                        this._props.selectReference(this._props.Document, this._props.col);
+                        this._props.selectReference(this._props.Doc, this._props.col);
                         return;
                     }
 
@@ -280,9 +280,9 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                     const ctrl: boolean = e.ctrlKey;
                     if (this._props.isRowActive?.()) {
                         if (selectedCell(this._props) && ctrl) {
-                            this._props.selectCell(this._props.Document, this._props.col, shift, ctrl);
+                            this._props.selectCell(this._props.Doc, this._props.col, shift, ctrl);
                             e.stopPropagation();
-                        } else !selectedCell(this._props) && this._props.selectCell(this._props.Document, this._props.col, shift, ctrl);
+                        } else !selectedCell(this._props) && this._props.selectCell(this._props.Doc, this._props.col, shift, ctrl);
                     }
                 })}
                 style={{
@@ -321,8 +321,8 @@ export class SchemaImageCell extends ObservableReactComponent<SchemaTableCellPro
     }
 
     get url() {
-        const field = Cast(this._props.Document[this._props.fieldKey], ImageField, null); // retrieve the primary image URL that is being rendered from the data doc
-        const alts = DocListCast(this._props.Document[this._props.fieldKey + '_alternates']); // retrieve alternate documents that may be rendered as alternate images
+        const field = Cast(this._props.Doc[this._props.fieldKey], ImageField, null); // retrieve the primary image URL that is being rendered from the data doc
+        const alts = DocListCast(this._props.Doc[this._props.fieldKey + '_alternates']); // retrieve alternate documents that may be rendered as alternate images
         const altpaths = alts
             .map(doc => Cast(doc[Doc.LayoutFieldKey(doc)], ImageField, null)?.url)
             .filter(url => url)
@@ -359,7 +359,7 @@ export class SchemaImageCell extends ObservableReactComponent<SchemaTableCellPro
     };
 
     render() {
-        const aspect = Doc.NativeAspect(this._props.Document); // aspect ratio
+        const aspect = Doc.NativeAspect(this._props.Doc); // aspect ratio
         // let width = Math.max(75, this._props.columnWidth); // get a with that is no smaller than 75px
         // const height = Math.max(75, width / aspect); // get a height either proportional to that or 75 px
         const height = this._props.rowHeight() ? this._props.rowHeight() - (this._props.padding || 6) * 2 : undefined;
@@ -379,7 +379,7 @@ export class SchemaDateCell extends ObservableReactComponent<SchemaTableCellProp
     @observable _pickingDate: boolean = false;
     @computed get date(): DateField {
         // if the cell is a date field, cast then contents to a date. Otherrwwise, make the contents undefined.
-        return DateCast(this._props.Document[this._props.fieldKey]);
+        return DateCast(this._props.Doc[this._props.fieldKey]);
     }
 
     handleChange = undoable((date: Date | null) => {
@@ -388,7 +388,7 @@ export class SchemaDateCell extends ObservableReactComponent<SchemaTableCellProp
         //     this.applyToDoc(this._document, this._props.row, this._props.col, script.run);
         // } else {
         // ^ DateCast is always undefined for some reason, but that is what the field should be set to
-        date && (this._props.Document[this._props.fieldKey] = new DateField(date));
+        date && (this._props.Doc[this._props.fieldKey] = new DateField(date));
         // }
     }, 'date change');
 
@@ -396,10 +396,10 @@ export class SchemaDateCell extends ObservableReactComponent<SchemaTableCellProp
         const { pointerEvents } = SchemaTableCell.renderProps(this._props);
         return (
             <>
-                <div style={{ pointerEvents: 'none' }}>
+                <div style={{ pointerEvents: 'none' }} tabIndex={1}>
                     <DatePicker dateFormat="Pp" selected={this.date?.date ?? Date.now()} onChange={emptyFunction} />
                 </div>
-                {pointerEvents === 'none' ? null : (
+                {pointerEvents === 'none' || !selectedCell(this._props) ? null : (
                     <Popup
                         icon={<FontAwesomeIcon size="xs" icon="caret-down" />}
                         size={Size.XSMALL}
@@ -451,11 +451,11 @@ export class SchemaBoolCell extends ObservableReactComponent<SchemaTableCellProp
                     onPointerDown={e => e.stopPropagation()}
                     style={{ marginRight: 4 }}
                     type="checkbox"
-                    checked={BoolCast(this._props.Document[this._props.fieldKey])}
+                    checked={BoolCast(this._props.Doc[this._props.fieldKey])}
                     onChange={undoable((value: React.ChangeEvent<HTMLInputElement> | undefined) => {
                         if ((value?.nativeEvent as MouseEvent | PointerEvent).shiftKey) {
                             this._props.setColumnValues(this._props.fieldKey.replace(/^_/, ''), (color === 'black' ? '=' : '') + (value?.target?.checked.toString() ?? ''));
-                        } else Doc.SetField(this._props.Document, this._props.fieldKey.replace(/^_/, ''), (color === 'black' ? '=' : '') + (value?.target?.checked.toString() ?? ''));
+                        } else Doc.SetField(this._props.Doc, this._props.fieldKey.replace(/^_/, ''), (color === 'black' ? '=' : '') + (value?.target?.checked.toString() ?? ''));
                     }, 'set bool cell')}
                 />
 
@@ -463,14 +463,14 @@ export class SchemaBoolCell extends ObservableReactComponent<SchemaTableCellProp
                     contents=""
                     fieldContents={fieldProps}
                     editing={selectedCell(this._props) ? undefined : false}
-                    GetValue={() => Field.toKeyValueString(this._props.Document, this._props.fieldKey)}
+                    GetValue={() => Field.toKeyValueString(this._props.Doc, this._props.fieldKey)}
                     SetValue={undoable((value: string, shiftDown?: boolean, enterKey?: boolean) => {
                         if (shiftDown && enterKey) {
                             this._props.setColumnValues(this._props.fieldKey.replace(/^_/, ''), value);
                             this._props.finishEdit?.();
                             return true;
                         }
-                        const set = Doc.SetField(this._props.Document, this._props.fieldKey.replace(/^_/, ''), value, Doc.IsDataProto(this._props.Document) ? true : undefined);
+                        const set = Doc.SetField(this._props.Doc, this._props.fieldKey.replace(/^_/, ''), value, Doc.IsDataProto(this._props.Doc) ? true : undefined);
                         this._props.finishEdit?.();
                         return set;
                     }, 'set bool cell')}
@@ -494,14 +494,22 @@ export class SchemaEnumerationCell extends ObservableReactComponent<SchemaTableC
                 <div style={{ width: '100%' }}>
                     <Select
                         styles={{
+                            dropdownIndicator: base => ({
+                                ...base,
+                                display: selectedCell(this._props) ? 'unset' : 'none',
+                            }),
                             container: base => ({
                                 ...base,
                                 height: 20,
+                                border: 'unset !important',
+                                pointerEvents: selectedCell(this._props) ? 'all' : 'none',
                             }),
                             control: base => ({
                                 ...base,
                                 height: 20,
                                 minHeight: 20,
+                                border: 'unset !important',
+                                background: selectedCell(this._props) ? 'lightgray' : undefined,
                             }),
                             placeholder: base => ({
                                 ...base,
@@ -517,6 +525,7 @@ export class SchemaEnumerationCell extends ObservableReactComponent<SchemaTableC
                                 ...base,
                                 height: 20,
                                 transform: 'scale(0.75)',
+                                border: 'unset !important',
                             }),
                             menuPortal: base => ({
                                 ...base,
@@ -529,10 +538,10 @@ export class SchemaEnumerationCell extends ObservableReactComponent<SchemaTableC
                         }}
                         menuPortalTarget={this._props.menuTarget}
                         menuPosition="absolute"
-                        placeholder={StrCast(this._props.Document[this._props.fieldKey], 'select...')}
+                        placeholder={StrCast(this._props.Doc[this._props.fieldKey], 'select...')}
                         options={options}
                         isMulti={false}
-                        onChange={val => Doc.SetField(this._props.Document, this._props.fieldKey.replace(/^_/, ''), `"${val?.value ?? ''}"`)}
+                        onChange={val => Doc.SetField(this._props.Doc, this._props.fieldKey.replace(/^_/, ''), `"${val?.value ?? ''}"`)}
                     />
                 </div>
             </div>