adding list and image types

3 files changed, 95 insertions, 4 deletions

diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx
index baf9d4156..4f2bfac08 100644
--- a/src/client/views/collections/CollectionSchemaCells.tsx
+++ b/src/client/views/collections/CollectionSchemaCells.tsx
@@ -24,6 +24,7 @@ import { SchemaHeaderField } from "../../../fields/SchemaHeaderField";
 import { undoBatch } from "../../util/UndoManager";
 import { SnappingManager } from "../../util/SnappingManager";
 import { ComputedField } from "../../../fields/ScriptField";
+import { ImageField } from "../../../fields/URLField";
 
 library.add(faExpand);
 
@@ -205,6 +206,18 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
             const doc = FieldValue(Cast(field, Doc));
             contents = typeof field === "object" ? doc ? StrCast(doc.title) === "" ? "--" : StrCast(doc.title) : `--${typeof field}--` : `--${typeof field}--`;
         }
+        if (type === "image") {
+            // fix this
+
+            const image = FieldValue(Cast(field, ImageField));
+            const doc = FieldValue(Cast(field, Doc));
+            contents = typeof field === "object" ? doc ? StrCast(doc.title) === "" ? "--" : StrCast(doc.title) : `--${typeof field}--` : `--${typeof field}--`;
+        }
+        if (type === "list") {
+            // fix this
+            contents = typeof field === "object" ? doc ? StrCast(field) === "" ? "--" : StrCast(field) : `--${typeof field}--` : `--${typeof field}--`;
+        }
+
 
         let className = "collectionSchemaView-cellWrapper";
         if (this._isEditing) className += " editing";
@@ -305,6 +318,71 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell {
 }
 
 @observer
+export class CollectionSchemaImageCell extends CollectionSchemaCell {
+    render() {
+        return this.renderCellWithType("image");
+    }
+    // render() {
+    //     const props: FieldViewProps = {
+    //         Document: this.props.rowProps.original,
+    //         DataDoc: this.props.rowProps.original,
+    //         LibraryPath: [],
+    //         dropAction: "alias",
+    //         bringToFront: emptyFunction,
+    //         rootSelected: returnFalse,
+    //         fieldKey: this.props.rowProps.column.id as string,
+    //         ContainingCollectionView: this.props.CollectionView,
+    //         ContainingCollectionDoc: this.props.CollectionView && this.props.CollectionView.props.Document,
+    //         isSelected: returnFalse,
+    //         select: emptyFunction,
+    //         renderDepth: this.props.renderDepth + 1,
+    //         ScreenToLocalTransform: Transform.Identity,
+    //         focus: emptyFunction,
+    //         active: returnFalse,
+    //         whenActiveChanged: emptyFunction,
+    //         PanelHeight: returnZero,
+    //         PanelWidth: returnZero,
+    //         NativeHeight: returnZero,
+    //         NativeWidth: returnZero,
+    //         addDocTab: this.props.addDocTab,
+    //         pinToPres: this.props.pinToPres,
+    //         ContentScaling: returnOne
+    //     };
+
+    //     if (props.fieldKey === "data") {
+    //         const reference = React.createRef<HTMLDivElement>();
+    //         return (
+    //             <div className="collectionSchemaView-cellWrapper" ref={this._focusRef} tabIndex={-1} onPointerDown={this.onPointerDown}>
+    //                 <div className="collectionSchemaView-cellContents" key={this._document[Id]} ref={reference}>
+    //                     {props.DataDoc?.data}
+    //                 </div >
+    //             </div>
+    //         );
+    //     } else {
+    //         return this.renderCellWithType("image");
+    //     }
+    // }
+}
+
+@observer
+export class CollectionSchemaListCell extends CollectionSchemaCell {
+    render() {
+        return this.renderCellWithType("list");
+    }
+
+    // render() {
+    //     const reference = React.createRef<HTMLDivElement>();
+    //     return (
+    //         <div className="collectionSchemaView-cellWrapper" ref={this._focusRef} tabIndex={-1} onPointerDown={this.onPointerDown}>
+    //             <div className="collectionSchemaView-cellContents" onPointerDown={onItemDown} key={this._document[Id]} ref={reference}>
+    //                 <input type="checkbox" checked={this._isChecked} onChange={this.toggleChecked} />
+    //             </div >
+    //         </div>
+    //     );
+    // }
+}
+
+@observer
 export class CollectionSchemaCheckboxCell extends CollectionSchemaCell {
     @observable private _isChecked: boolean = typeof this.props.rowProps.original[this.props.rowProps.column.id as string] === "boolean" ? BoolCast(this.props.rowProps.original[this.props.rowProps.column.id as string]) : false;
 
diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx
index 2ad8e5bfa..85908c0ca 100644
--- a/src/client/views/collections/CollectionSchemaHeaders.tsx
+++ b/src/client/views/collections/CollectionSchemaHeaders.tsx
@@ -2,7 +2,7 @@ import React = require("react");
 import { action, observable } from "mobx";
 import { observer } from "mobx-react";
 import "./CollectionSchemaView.scss";
-import { faPlus, faFont, faHashtag, faAlignJustify, faCheckSquare, faToggleOn, faSortAmountDown, faSortAmountUp, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { faPlus, faFont, faHashtag, faAlignJustify, faCheckSquare, faToggleOn, faSortAmountDown, faSortAmountUp, faTimes, faImage, faListUl } from '@fortawesome/free-solid-svg-icons';
 import { library, IconProp } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { ColumnType } from "./CollectionSchemaView";
@@ -13,7 +13,7 @@ const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
 
-library.add(faPlus, faFont, faHashtag, faAlignJustify, faCheckSquare, faToggleOn, faFile as any, faSortAmountDown, faSortAmountUp, faTimes);
+library.add(faPlus, faFont, faHashtag, faAlignJustify, faCheckSquare, faToggleOn, faFile as any, faSortAmountDown, faSortAmountUp, faTimes, faImage, faListUl);
 
 export interface HeaderProps {
     keyValue: SchemaHeaderField;
@@ -33,7 +33,8 @@ export interface HeaderProps {
 export class CollectionSchemaHeader extends React.Component<HeaderProps> {
     render() {
         const icon: IconProp = this.props.keyType === ColumnType.Number ? "hashtag" : this.props.keyType === ColumnType.String ? "font" :
-            this.props.keyType === ColumnType.Boolean ? "check-square" : this.props.keyType === ColumnType.Doc ? "file" : "align-justify";
+            this.props.keyType === ColumnType.Boolean ? "check-square" : this.props.keyType === ColumnType.Doc ? "file" :
+                this.props.keyType === ColumnType.Image ? "image" : this.props.keyType === ColumnType.List ? "list-ul" : "align-justify";
         return (
             <div className="collectionSchemaView-header" style={{ background: this.props.keyValue.color }}>
                 <CollectionSchemaColumnMenu
@@ -160,10 +161,18 @@ export class CollectionSchemaColumnMenu extends React.Component<ColumnMenuProps>
                         <FontAwesomeIcon icon={"check-square"} size="sm" />
                         Checkbox
                     </div>
+                    <div className={"columnMenu-option" + (type === ColumnType.List ? " active" : "")} onClick={() => this.changeColumnType(ColumnType.List)}>
+                        <FontAwesomeIcon icon={"list-ul"} size="sm" />
+                        List
+                    </div>
                     <div className={"columnMenu-option" + (type === ColumnType.Doc ? " active" : "")} onClick={() => this.changeColumnType(ColumnType.Doc)}>
                         <FontAwesomeIcon icon={"file"} size="sm" />
                         Document
                     </div>
+                    <div className={"columnMenu-option" + (type === ColumnType.Image ? " active" : "")} onClick={() => this.changeColumnType(ColumnType.Image)}>
+                        <FontAwesomeIcon icon={"image"} size="sm" />
+                        Image
+                    </div>
                 </div>
             </div >
         );
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 35f892d65..74f31b428 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -20,7 +20,7 @@ import { undoBatch } from "../../util/UndoManager";
 import { COLLECTION_BORDER_WIDTH } from '../../views/globalCssVariables.scss';
 import { ContextMenu } from "../ContextMenu";
 import '../DocumentDecorations.scss';
-import { CellProps, CollectionSchemaCell, CollectionSchemaCheckboxCell, CollectionSchemaDocCell, CollectionSchemaNumberCell, CollectionSchemaStringCell } from "./CollectionSchemaCells";
+import { CellProps, CollectionSchemaCell, CollectionSchemaCheckboxCell, CollectionSchemaDocCell, CollectionSchemaNumberCell, CollectionSchemaStringCell, CollectionSchemaImageCell, CollectionSchemaListCell } from "./CollectionSchemaCells";
 import { CollectionSchemaAddColumnHeader, CollectionSchemaHeader } from "./CollectionSchemaHeaders";
 import { MovableColumn, MovableRow } from "./CollectionSchemaMovableTableHOC";
 import "./CollectionSchemaView.scss";
@@ -40,6 +40,8 @@ export enum ColumnType {
     String,
     Boolean,
     Doc,
+    Image,
+    List
 }
 // this map should be used for keys that should have a const type of value
 const columnTypes: Map<string, ColumnType> = new Map([
@@ -349,6 +351,8 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
                     if (colType === ColumnType.String) return <CollectionSchemaStringCell {...props} />;
                     if (colType === ColumnType.Boolean) return <CollectionSchemaCheckboxCell {...props} />;
                     if (colType === ColumnType.Doc) return <CollectionSchemaDocCell {...props} />;
+                    if (colType === ColumnType.Image) return <CollectionSchemaImageCell {...props} />;
+                    if (colType === ColumnType.List) return <CollectionSchemaListCell {...props} />;
                     return <CollectionSchemaCell {...props} />;
                 },
                 minWidth: 200,