From 45e3384b31ed2816e6846c2ff545fe55dc155339 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Tue, 23 Jun 2020 16:41:07 -0500
Subject: minor changes

---
 .../views/collections/CollectionSchemaCells.tsx    | 33 +++++++++---
 .../views/collections/CollectionSchemaHeaders.tsx  | 10 ++++
 .../views/collections/CollectionSchemaView.scss    |  4 ++
 .../views/collections/CollectionSchemaView.tsx     | 63 +++++++++++++++-------
 4 files changed, 85 insertions(+), 25 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx
index 6f43a2097..a79360a20 100644
--- a/src/client/views/collections/CollectionSchemaCells.tsx
+++ b/src/client/views/collections/CollectionSchemaCells.tsx
@@ -94,6 +94,7 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
 
     @action
     onPointerDown = async (e: React.PointerEvent): Promise<void> => {
+
         this.props.changeFocusedCellByIndex(this.props.row, this.props.col);
         this.props.setPreviewDoc(this.props.rowProps.original);
 
@@ -239,10 +240,14 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
         // );   
         trace();
 
+
+
         return (
             <div className="collectionSchemaView-cellContainer" style={{ cursor: fieldIsDoc ? "grab" : "auto" }} ref={dragRef} onPointerDown={this.onPointerDown} onPointerEnter={onPointerEnter} onPointerLeave={onPointerLeave}>
                 <div className={className} ref={this._focusRef} onPointerDown={onItemDown} tabIndex={-1}>
                     <div className="collectionSchemaView-cellContents" ref={type === undefined || type === "document" ? this.dropRef : null} key={props.Document[Id]}>
+
+
                         <EditableView
                             editing={this._isEditing}
                             isEditingCallback={this.isEditingCallback}
@@ -251,28 +256,42 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
                             height={"auto"}
                             maxHeight={Number(MAX_ROW_HEIGHT)}
                             GetValue={() => {
-                                const cfield = ComputedField.WithoutComputed(() => FieldValue(props.Document[props.fieldKey]));
-                                const cscript = cfield instanceof ComputedField ? cfield.script.originalScript : undefined;
-                                const cfinalScript = cscript?.split("return")[cscript.split("return").length - 1];
-                                const val = cscript !== undefined ? `:=${cfinalScript?.substring(0, cfinalScript.length - 2)}` :
-                                    Field.IsField(cfield) ? Field.toScriptString(cfield) : "";
-                                return val;
+                                if (type === "number" && (contents === 0 || contents === "0")) {
+                                    return "0";
+                                } else {
+                                    const cfield = ComputedField.WithoutComputed(() => FieldValue(props.Document[props.fieldKey]));
+                                    console.log(cfield);
+                                    if (type === "number") {
+                                        return StrCast(cfield);
+                                    }
+                                    const cscript = cfield instanceof ComputedField ? cfield.script.originalScript : undefined;
+                                    const cfinalScript = cscript?.split("return")[cscript.split("return").length - 1];
+                                    const val = cscript !== undefined ? `:=${cfinalScript?.substring(0, cfinalScript.length - 2)}` :
+                                        Field.IsField(cfield) ? Field.toScriptString(cfield) : "";
+                                    return val;
+                                }
+
                             }}
                             SetValue={action((value: string) => {
                                 let retVal = false;
+
                                 if (value.startsWith(":=")) {
                                     retVal = this.props.setComputed(value.substring(2), props.Document, this.props.rowProps.column.id!, this.props.row, this.props.col);
                                 } else {
                                     const script = CompileScript(value, { requiredType: type, typecheck: false, editable: true, addReturn: true, params: { this: Doc.name, $r: "number", $c: "number", $: "any" } });
                                     if (script.compiled) {
                                         retVal = this.applyToDoc(props.Document, this.props.row, this.props.col, script.run);
+                                        console.log("compiled");
                                     }
+
                                 }
                                 if (retVal) {
                                     this._isEditing = false; // need to set this here. otherwise, the assignment of the field will invalidate & cause render() to be called with the wrong value for 'editing'
                                     this.props.setIsEditing(false);
                                 }
                                 return retVal;
+
+                                //return true;
                             })}
                             OnFillDown={async (value: string) => {
                                 const script = CompileScript(value, { requiredType: type, typecheck: false, editable: true, addReturn: true, params: { this: Doc.name, $r: "number", $c: "number", $: "any" } });
@@ -284,6 +303,8 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
                                 }
                             }}
                         />
+
+
                     </div >
                     {/* {fieldIsDoc ? docExpander : null} */}
                 </div>
diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx
index 0d6cf4474..d9a27f355 100644
--- a/src/client/views/collections/CollectionSchemaHeaders.tsx
+++ b/src/client/views/collections/CollectionSchemaHeaders.tsx
@@ -73,6 +73,16 @@ export class CollectionSchemaAddColumnHeader extends React.Component<AddColumnHe
     }
 }
 
+
+
+
+
+
+
+
+
+
+
 export interface ColumnMenuProps {
     columnField: SchemaHeaderField;
     // keyValue: string;
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index 6f076cbb5..1463cdb3c 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -62,10 +62,14 @@
         width: calc(100% - 52px);
         margin-left: 50px;
 
+        z-index: 10000;
+
         &.-header {
             font-size: 12px;
             height: 30px;
             box-shadow: none;
+            z-index: 10000;
+            overflow-y: visible;
         }
 
         .rt-resizable-header-content {
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 03db0377a..9c4ec7021 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -1,5 +1,5 @@
 import React = require("react");
-import { library } from '@fortawesome/fontawesome-svg-core';
+import { library, IconProp } from '@fortawesome/fontawesome-svg-core';
 import { faCog, faPlus, faSortDown, faSortUp, faTable } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, observable, untracked } from "mobx";
@@ -21,7 +21,7 @@ import { COLLECTION_BORDER_WIDTH } from '../../views/globalCssVariables.scss';
 import { ContextMenu } from "../ContextMenu";
 import '../DocumentDecorations.scss';
 import { CellProps, CollectionSchemaCell, CollectionSchemaCheckboxCell, CollectionSchemaDocCell, CollectionSchemaNumberCell, CollectionSchemaStringCell, CollectionSchemaImageCell, CollectionSchemaListCell } from "./CollectionSchemaCells";
-import { CollectionSchemaAddColumnHeader, CollectionSchemaHeader } from "./CollectionSchemaHeaders";
+import { CollectionSchemaAddColumnHeader, CollectionSchemaHeader, CollectionSchemaColumnMenu } from "./CollectionSchemaHeaders";
 import { MovableColumn, MovableRow } from "./CollectionSchemaMovableTableHOC";
 import "./CollectionSchemaView.scss";
 import { CollectionSubView } from "./CollectionSubView";
@@ -233,10 +233,6 @@ export interface SchemaTableProps {
 
 
 
-
-
-
-
 @observer
 export class SchemaTable extends React.Component<SchemaTableProps> {
     private DIVIDER_WIDTH = 4;
@@ -320,19 +316,48 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
         }
 
         const cols = this.columns.map(col => {
-            const header = <CollectionSchemaHeader
-                keyValue={col}
-                possibleKeys={possibleKeys}
-                existingKeys={this.columns.map(c => c.heading)}
-                keyType={this.getColumnType(col)}
-                typeConst={columnTypes.get(col.heading) !== undefined}
-                onSelect={this.changeColumns}
-                setIsEditing={this.setHeaderIsEditing}
-                deleteColumn={this.deleteColumn}
-                setColumnType={this.setColumnType}
-                setColumnSort={this.setColumnSort}
-                setColumnColor={this.setColumnColor}
-            />;
+
+            const icon: IconProp = this.getColumnType(col) === ColumnType.Number ? "hashtag" : this.getColumnType(col) === ColumnType.String ? "font" :
+                this.getColumnType(col) === ColumnType.Boolean ? "check-square" : this.getColumnType(col) === ColumnType.Doc ? "file" :
+                    this.getColumnType(col) === ColumnType.Image ? "image" : this.getColumnType(col) === ColumnType.List ? "list-ul" : "align-justify";
+
+
+
+            const header = <div className="collectionSchemaView-header" style={{ background: col.color }}>
+                <CollectionSchemaColumnMenu
+                    columnField={col}
+                    // keyValue={this.props.keyValue.heading}
+                    possibleKeys={possibleKeys}
+                    existingKeys={this.columns.map(c => c.heading)}
+                    // keyType={this.getColumnType(col)}
+                    typeConst={columnTypes.get(col.heading) !== undefined}
+                    menuButtonContent={<div><FontAwesomeIcon icon={icon} size="sm" />{col.heading}</div>}
+                    addNew={false}
+                    onSelect={this.changeColumns}
+                    setIsEditing={this.setHeaderIsEditing}
+                    deleteColumn={this.deleteColumn}
+                    onlyShowOptions={false}
+                    setColumnType={this.setColumnType}
+                    setColumnSort={this.setColumnSort}
+                    setColumnColor={this.setColumnColor}
+                />
+            </div>;
+
+
+            // <CollectionSchemaHeader
+            //     keyValue={col}
+            //     possibleKeys={possibleKeys}
+            //     existingKeys={this.columns.map(c => c.heading)}
+            //     keyType={this.getColumnType(col)}
+            //     typeConst={columnTypes.get(col.heading) !== undefined}
+            //     onSelect={this.changeColumns}
+            //     setIsEditing={this.setHeaderIsEditing}
+            //     deleteColumn={this.deleteColumn}
+            //     setColumnType={this.setColumnType}
+            //     setColumnSort={this.setColumnSort}
+            //     setColumnColor={this.setColumnColor}
+            // />;
+
 
             return {
                 Header: <MovableColumn columnRenderer={header} columnValue={col} allColumns={this.columns} reorderColumns={this.reorderColumns} ScreenToLocalTransform={this.props.ScreenToLocalTransform} />,
-- 
cgit v1.2.3-70-g09d2