added schema cell types for images and dates

1 files changed, 138 insertions, 20 deletions

diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index f9319050e..4e31b1e1e 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -1,15 +1,20 @@
 import React = require('react');
 import { observer } from 'mobx-react';
-import { Doc, Field } from '../../../../fields/Doc';
-import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnZero } from '../../../../Utils';
+import { Doc, DocListCast, Field, Opt } from '../../../../fields/Doc';
+import { Utils, emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnZero } from '../../../../Utils';
 import { Transform } from '../../../util/Transform';
 import { EditableView } from '../../EditableView';
 import { FieldView, FieldViewProps } from '../../nodes/FieldView';
 import { KeyValueBox } from '../../nodes/KeyValueBox';
 import { DefaultStyleProvider } from '../../StyleProvider';
-import { CollectionSchemaView } from './CollectionSchemaView';
+import { CollectionSchemaView, ColumnType, FInfotoColType } from './CollectionSchemaView';
 import './CollectionSchemaView.scss';
-import { computed } from 'mobx';
+import { action, computed, observable } from 'mobx';
+import { extname } from 'path';
+import { Cast, DateCast } from '../../../../fields/Types';
+import { ImageField } from '../../../../fields/URLField';
+import { DateField } from '../../../../fields/DateField';
+import DatePicker from 'react-datepicker';
 
 export interface SchemaTableCellProps {
     Document: Doc;
@@ -23,10 +28,10 @@ export interface SchemaTableCellProps {
 @observer
 export class SchemaTableCell extends React.Component<SchemaTableCellProps> {
     get readOnly() {
-        return this.props.schemaView?.keyInfos[this.props.fieldKey].readOnly;
+        return this.props.schemaView?.fieldInfos[this.props.fieldKey]?.readOnly ?? false;
     }
 
-    render() {
+    get defaultCellContent() {
         const props: FieldViewProps = {
             Document: this.props.Document,
             docFilters: returnEmptyFilter,
@@ -53,21 +58,134 @@ export class SchemaTableCell extends React.Component<SchemaTableCellProps> {
         };
 
         return (
-            <div className="schema-table-cell" style={{ width: this.props.columnWidth }}>
-                <div className="schemacell-edit-wrapper" style={this.props.isRowActive() && !this.readOnly ? { cursor: 'text', pointerEvents: 'auto' } : { cursor: 'default', pointerEvents: 'none' }}>
-                    <EditableView
-                        contents={<FieldView {...props} />}
-                        GetValue={() => Field.toKeyValueString(this.props.Document, this.props.fieldKey)}
-                        SetValue={(value: string, shiftDown?: boolean, enterKey?: boolean) => {
-                            if (shiftDown && enterKey) {
-                                this.props.setColumnValues(this.props.fieldKey, value);
-                            }
-                            return KeyValueBox.SetField(this.props.Document, this.props.fieldKey, value);
-                        }}
-                        editing={this.props.isRowActive() ? undefined : false}
-                    />
-                </div>
+            <div className="schemacell-edit-wrapper">
+                <EditableView
+                    contents={<FieldView {...props} />}
+                    GetValue={() => Field.toKeyValueString(this.props.Document, this.props.fieldKey)}
+                    SetValue={(value: string, shiftDown?: boolean, enterKey?: boolean) => {
+                        if (shiftDown && enterKey) {
+                            this.props.setColumnValues(this.props.fieldKey, value);
+                        }
+                        return KeyValueBox.SetField(this.props.Document, this.props.fieldKey, value);
+                    }}
+                    editing={this.props.isRowActive() ? undefined : false}
+                />
+            </div>
+        );
+    }
+
+    getCellWithContent(content: any) {
+        return (
+            <div
+                className="schema-table-cell"
+                style={this.props.isRowActive() && !this.readOnly ? { width: this.props.columnWidth, cursor: 'text', pointerEvents: 'auto' } : { width: this.props.columnWidth, cursor: 'default', pointerEvents: 'none' }}>
+                {content}
             </div>
         );
     }
+
+    get getCellType() {
+        const columnTypeStr = this.props.schemaView?.fieldInfos[this.props.fieldKey]?.fieldType;
+        if (columnTypeStr) {
+            if (columnTypeStr in FInfotoColType) {
+                return FInfotoColType[columnTypeStr];
+            }
+
+            return ColumnType.Any;
+        }
+
+        const cellValue = this.props.Document[this.props.fieldKey];
+        if (cellValue instanceof ImageField) return ColumnType.Image;
+        if (cellValue instanceof DateField) return ColumnType.Date;
+
+        return ColumnType.Any;
+    }
+
+    render() {
+        const cellType: ColumnType = this.getCellType;
+        switch (cellType) {
+            case ColumnType.Image:
+                return <SchemaImageCell {...this.props} />;
+            case ColumnType.Date:
+                return <SchemaDateCell {...this.props} />;
+            default:
+                return this.getCellWithContent(this.defaultCellContent);
+        }
+    }
+}
+
+// mj: most of this is adapted from old schema code so I'm not sure what it does tbh
+@observer
+export class SchemaImageCell extends SchemaTableCell {
+    choosePath(url: URL) {
+        if (url.protocol === 'data') return url.href; // if the url ises the data protocol, just return the href
+        if (url.href.indexOf(window.location.origin) === -1) return Utils.CorsProxy(url.href); // otherwise, put it through the cors proxy erver
+        if (!/\.(png|jpg|jpeg|gif|webp)$/.test(url.href.toLowerCase())) return url.href; //Why is this here — good question
+
+        const ext = extname(url.href);
+        return url.href.replace(ext, '_o' + ext);
+    }
+
+    get content() {
+        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 altpaths = alts
+            .map(doc => Cast(doc[Doc.LayoutFieldKey(doc)], ImageField, null)?.url)
+            .filter(url => url)
+            .map(url => this.choosePath(url)); // access the primary layout data of the alternate documents
+        const paths = field ? [this.choosePath(field.url), ...altpaths] : altpaths;
+        // If there is a path, follow it; otherwise, follow a link to a default image icon
+        const url = paths.length ? paths : [Utils.CorsProxy('http://www.cs.brown.edu/~bcz/noImage.png')];
+
+        const aspect = Doc.NativeAspect(this.props.Document); // 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
+        width = height * aspect; // increase the width of the image if necessary to maintain proportionality
+
+        return <img src={url[0]} width={paths.length ? width : '20px'} height={paths.length ? height : '20px'} />;
+    }
+
+    render() {
+        return this.getCellWithContent(this.content);
+    }
+}
+
+@observer
+export class SchemaDateCell extends SchemaTableCell {
+    @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]);
+    }
+
+    @action
+    handleChange = (date: any) => {
+        // 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);
+        //}
+    };
+
+    get content() {
+        return !this._pickingDate ? (
+            <div onPointerDown={action(() => (this._pickingDate = true))}>{this.defaultCellContent}</div>
+        ) : (
+            <DatePicker
+                selected={this.date.date}
+                onSelect={(date: any) => {
+                    this.handleChange(date);
+                    this._pickingDate = false;
+                }}
+                onChange={(date: any) => this.handleChange(date)}
+            />
+        );
+    }
+
+    render() {
+        return this.getCellWithContent(this.content);
+    }
 }