Merge branch 'master' into data-visualization-sarah

3 files changed, 38 insertions, 10 deletions

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
index ee61c4141..fed4e89cf 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
@@ -132,7 +132,7 @@
 
     .row-menu {
         display: flex;
-        justify-content: flex-end;
+        justify-content: center;
     }
 }
 
@@ -228,7 +228,10 @@
         display: flex;
         flex-direction: row;
         min-width: 50px;
-        justify-content: flex-end;
+        justify-content: center;
+        .iconButton-container {
+            min-width: unset !important;
+        }
     }
 
     .row-cells {
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index f2fe0dde7..39fea2d2e 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -121,7 +121,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
                         pointerEvents: !this._props.isContentActive() ? 'none' : undefined,
                     }}>
                     <IconButton
-                        tooltip="whether document interations are enabled"
+                        tooltip="whether document interactions are enabled"
                         icon={this.Document._lockedPosition ? <CgLockUnlock size="12px" /> : <CgLock size="12px" />}
                         size={Size.XSMALL}
                         onPointerDown={e =>
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index dbaa6e110..001ad5ab6 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -24,6 +24,11 @@ import { KeyValueBox } from '../../nodes/KeyValueBox';
 import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox';
 import { ColumnType, FInfotoColType } from './CollectionSchemaView';
 import './CollectionSchemaView.scss';
+import 'react-datepicker/dist/react-datepicker.css';
+import { Popup, Size, Type } from 'browndash-components';
+import { IconLookup, faCaretDown } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { SettingsManager } from '../../../util/SettingsManager';
 
 export interface SchemaTableCellProps {
     Document: Doc;
@@ -162,7 +167,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
             case ColumnType.Boolean: return <SchemaBoolCell {...this._props} />;
             case ColumnType.RTF: return <SchemaRTFCell {...this._props} />;
             case ColumnType.Enumeration: return <SchemaEnumerationCell {...this._props} options={this._props.getFinfo(this._props.fieldKey)?.values?.map(val => val.toString())} />;
-            case ColumnType.Date: // return <SchemaDateCell {...this._props} />;
+            case ColumnType.Date: return <SchemaDateCell {...this._props} />;
             default:  return this.defaultCellContent;
         }
     }
@@ -260,19 +265,39 @@ export class SchemaDateCell extends ObservableReactComponent<SchemaTableCellProp
         return DateCast(this._props.Document[this._props.fieldKey]);
     }
 
-    @action
-    handleChange = (date: any) => {
+    handleChange = undoable((date: Date | null) => {
         // const script = CompileScript(date.toString(), { requiredType: "Date", addReturn: true, params: { this: Doc.name } });
         // if (script.compiled) {
         //     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
-        this._props.Document[this._props.fieldKey] = new DateField(date as Date);
+        date && (this._props.Document[this._props.fieldKey] = new DateField(date));
         //}
-    };
+    }, 'date change');
 
     render() {
-        return <DatePicker dateFormat={'Pp'} selected={this.date.date} onChange={(date: any) => this.handleChange(date)} />;
+        const { color, textDecoration, fieldProps, cursor, pointerEvents } = SchemaTableCell.renderProps(this._props);
+        return (
+            <>
+                <div style={{ pointerEvents: 'none' }}>
+                    <DatePicker dateFormat="Pp" selected={this.date?.date ?? Date.now()} onChange={e => {}} />
+                </div>
+                {pointerEvents === 'none' ? null : (
+                    <Popup
+                        icon={<FontAwesomeIcon size="sm" icon="caret-down" />}
+                        size={Size.XSMALL}
+                        type={Type.TERT}
+                        color={SettingsManager.userColor}
+                        background={SettingsManager.userBackgroundColor}
+                        popup={
+                            <div style={{ width: 'fit-content', height: '200px' }}>
+                                <DatePicker open={true} dateFormat="Pp" selected={this.date?.date ?? Date.now()} onChange={this.handleChange} />
+                            </div>
+                        }
+                    />
+                )}
+            </>
+        );
     }
 }
 @observer
@@ -394,7 +419,7 @@ export class SchemaEnumerationCell extends ObservableReactComponent<SchemaTableC
                             }),
                         }}
                         menuPortalTarget={this._props.menuTarget}
-                        menuPosition={'absolute'}
+                        menuPosition="absolute"
                         placeholder={StrCast(this._props.Document[this._props.fieldKey], 'select...')}
                         options={options}
                         isMulti={false}