From 7934c38ed641f4a10cd008fe415a50aef1240e10 Mon Sep 17 00:00:00 2001
From: mehekj <mehek.jethani@gmail.com>
Date: Mon, 3 Apr 2023 17:28:51 -0400
Subject: fixed dragging doc out of schema and removing schema column sort

---
 .../views/collections/collectionSchema/SchemaColumnHeader.tsx     | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

(limited to 'src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx')

diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index cbdaeb933..43895fc9c 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -12,7 +12,7 @@ export interface SchemaColumnHeaderProps {
     columnIndex: number;
     sortField: string;
     sortDesc: boolean;
-    setSort: (field: string, desc: boolean) => void;
+    setSort: (field: string | undefined, desc?: boolean) => void;
     removeColumn: (index: number) => void;
     resizeColumn: (e: any, index: number) => void;
     dragColumn: (e: any, index: number) => boolean;
@@ -30,8 +30,10 @@ export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps>
     sortClicked = (e: React.PointerEvent) => {
         e.stopPropagation();
         e.preventDefault();
-        if (this.props.sortField == this.fieldKey) {
-            this.props.setSort(this.fieldKey, !this.props.sortDesc);
+        if (this.props.sortField == this.fieldKey && this.props.sortDesc) {
+            this.props.setSort(undefined);
+        } else if (this.props.sortField == this.fieldKey) {
+            this.props.setSort(this.fieldKey, true);
         } else {
             this.props.setSort(this.fieldKey, false);
         }
-- 
cgit v1.2.3-70-g09d2


From 8c5e898b89a6634f54a3961ba3693948c7d991d6 Mon Sep 17 00:00:00 2001
From: mehekj <mehek.jethani@gmail.com>
Date: Wed, 19 Apr 2023 21:31:59 -0400
Subject: added date fieldinfo, fixed column drag&drop

---
 src/client/documents/Documents.ts                  |  6 ++
 .../collectionSchema/CollectionSchemaView.tsx      | 75 ++++++++++++++++------
 .../collectionSchema/SchemaColumnHeader.tsx        | 19 +++++-
 3 files changed, 80 insertions(+), 20 deletions(-)

(limited to 'src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 52f8d5717..60acb55e6 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -123,6 +123,10 @@ class DAInfo extends FInfo {
     values? = ['alias', 'copy', 'move', 'same', 'proto', 'none'];
     readOnly = true;
 }
+class DateInfo extends FInfo {
+    fieldType? = 'date';
+    values?: DateField[] = [];
+}
 type BOOLt = BoolInfo | boolean;
 type NUMt = NumInfo | number;
 type STRt = StrInfo | string;
@@ -130,6 +134,7 @@ type DOCt = DocInfo | Doc;
 type DIMt = DimInfo | typeof DimUnit.Pixel | typeof DimUnit.Ratio;
 type PEVt = PEInfo | 'none' | 'all';
 type DROPt = DAInfo | dropActionType;
+type DATEt = DateInfo | number;
 export class DocumentOptions {
     x?: NUMt = new NumInfo('x coordinate of document in a freeform view');
     y?: NUMt = new NumInfo('y coordinage of document in a freeform view');
@@ -137,6 +142,7 @@ export class DocumentOptions {
     system?: BOOLt = new BoolInfo('is this a system created/owned doc', true);
     type?: STRt = new StrInfo('type of document', true, Array.from(Object.keys(DocumentType)));
     title?: string;
+    creationDate?: DATEt = new DateInfo('date the document was created', true);
     _dropAction?: DROPt = new DAInfo("what should happen to this document when it's dropped somewhere else");
     allowOverlayDrop?: BOOLt = new BoolInfo('can documents be dropped onto this document without using dragging title bar or holding down embed key (ctrl)?', true);
     childDropAction?: DROPt = new DAInfo("what should happen to the source document when it's dropped onto a child of a collection ");
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index d3992d12c..7cb3c6d93 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -24,13 +24,13 @@ import { CollectionSubView } from '../CollectionSubView';
 import './CollectionSchemaView.scss';
 import { SchemaColumnHeader } from './SchemaColumnHeader';
 import { SchemaRowBox } from './SchemaRowBox';
+import { Colors } from '../../global/globalEnums';
 
 export enum ColumnType {
     Number,
     String,
     Boolean,
-    Doc,
-    Image,
+    Date,
 }
 
 const defaultColumnKeys: string[] = ['title', 'type', 'author', 'creationDate', 'text'];
@@ -286,18 +286,13 @@ export class CollectionSchemaView extends CollectionSubView() {
 
     @undoBatch
     @action
-    swapColumns = (index1: number, index2: number) => {
-        const tempKey = this.columnKeys[index1];
-        const tempWidth = this.storedColumnWidths[index1];
-
-        let currKeys = this.columnKeys;
-        currKeys[index1] = currKeys[index2];
-        currKeys[index2] = tempKey;
+    moveColumn = (fromIndex: number, toIndex: number) => {
+        let currKeys = this.columnKeys.slice();
+        currKeys.splice(toIndex, 0, currKeys.splice(fromIndex, 1)[0]);
         this.layoutDoc.columnKeys = new List<string>(currKeys);
 
-        let currWidths = this.storedColumnWidths;
-        currWidths[index1] = currWidths[index2];
-        currWidths[index2] = tempWidth;
+        let currWidths = this.storedColumnWidths.slice();
+        currWidths.splice(toIndex, 0, currWidths.splice(fromIndex, 1)[0]);
         this.layoutDoc.columnWidths = new List<number>(currWidths);
     };
 
@@ -310,9 +305,44 @@ export class CollectionSchemaView extends CollectionSubView() {
         });
         DragManager.StartColumnDrag(dragEles, dragData, e.x, e.y);
 
+        document.removeEventListener('pointermove', this.highlightDropColumn);
+        document.addEventListener('pointermove', this.highlightDropColumn);
+        let stopHighlight = (e: PointerEvent) => {
+            document.removeEventListener('pointermove', this.highlightDropColumn);
+            document.removeEventListener('pointerup', stopHighlight);
+        };
+        document.addEventListener('pointerup', stopHighlight);
+
         return true;
     };
 
+    @action
+    highlightDropColumn = (e: PointerEvent) => {
+        e.stopPropagation();
+        const mouseX = this.props.ScreenToLocalTransform().transformPoint(e.clientX, e.clientY)[0];
+        let index: number | undefined;
+        this.displayColumnWidths.reduce((total, curr, i) => {
+            if (total <= mouseX && total + curr >= mouseX) {
+                if (mouseX <= total + curr / 2) index = i;
+                else index = i + 1;
+            }
+            return total + curr;
+        }, CollectionSchemaView._rowMenuWidth);
+
+        this._colEles.forEach((colRef, i) => {
+            let leftStyle = '';
+            let rightStyle = '';
+            if (i + 1 === index) rightStyle = `solid 2px ${Colors.MEDIUM_BLUE}`;
+            if (i === index && i === 0) leftStyle = `solid 2px ${Colors.MEDIUM_BLUE}`;
+            colRef.style.borderLeft = leftStyle;
+            colRef.style.borderRight = rightStyle;
+            this.childDocs.forEach(doc => {
+                this._rowEles.get(doc).children[1].children[i].style.borderLeft = leftStyle;
+                this._rowEles.get(doc).children[1].children[i].style.borderRight = rightStyle;
+            });
+        });
+    };
+
     @action
     addRowRef = (doc: Doc, ref: HTMLDivElement) => this._rowEles.set(doc, ref);
 
@@ -354,15 +384,25 @@ export class CollectionSchemaView extends CollectionSubView() {
         if (de.complete.columnDragData) {
             e.stopPropagation();
             const mouseX = this.props.ScreenToLocalTransform().transformPoint(de.x, de.y)[0];
-            let i = de.complete.columnDragData.colIndex;
-            this.displayColumnWidths.reduce((total, curr, index) => {
+            let index = de.complete.columnDragData.colIndex;
+            this.displayColumnWidths.reduce((total, curr, i) => {
                 if (total <= mouseX && total + curr >= mouseX) {
-                    i = index;
+                    if (mouseX <= total + curr / 2) index = i;
+                    else index = i + 1;
                 }
                 return total + curr;
             }, CollectionSchemaView._rowMenuWidth);
-            this.swapColumns(de.complete.columnDragData.colIndex, i);
-            e.stopPropagation();
+            this.moveColumn(de.complete.columnDragData.colIndex, index);
+
+            this._colEles.forEach((colRef, i) => {
+                colRef.style.borderLeft = '';
+                colRef.style.borderRight = '';
+                this.childDocs.forEach(doc => {
+                    this._rowEles.get(doc).children[1].children[i].style.borderLeft = '';
+                    this._rowEles.get(doc).children[1].children[i].style.borderRight = '';
+                });
+            });
+
             return true;
         }
         const draggedDocs = de.complete.docDragData?.draggedDocuments;
@@ -791,7 +831,6 @@ export class CollectionSchemaView extends CollectionSubView() {
                     {this._columnMenuIndex !== undefined && this.renderColumnMenu}
                     {this._filterColumnIndex !== undefined && this.renderFilterMenu}
                     <CollectionSchemaViewDocs schema={this} childDocs={this.sortedDocsFunc} />
-
                     <EditableView GetValue={returnEmptyString} SetValue={this.addNewTextDoc} placeholder={"Type ':' for commands"} contents={'+ New Node'} menuCallback={this.menuCallback} height={CollectionSchemaView._newNodeInputHeight} />
                 </div>
                 {this.previewWidth > 0 && <div className="schema-preview-divider" style={{ width: CollectionSchemaView._previewDividerWidth }} onPointerDown={this.onDividerDown}></div>}
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index b133347cf..243fe0c61 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -1,10 +1,12 @@
 import React = require('react');
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed } from 'mobx';
+import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { emptyFunction, setupMoveUpEvents } from '../../../../Utils';
 import { Colors } from '../../global/globalEnums';
 import './CollectionSchemaView.scss';
+import { SnappingManager } from '../../../util/SnappingManager';
+import { DragManager } from '../../../util/DragManager';
 
 export interface SchemaColumnHeaderProps {
     columnKeys: string[];
@@ -22,6 +24,8 @@ export interface SchemaColumnHeaderProps {
 
 @observer
 export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps> {
+    @observable _ref: HTMLDivElement | null = null;
+
     @computed get fieldKey() {
         return this.props.columnKeys[this.props.columnIndex];
     }
@@ -46,7 +50,18 @@ export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps>
 
     render() {
         return (
-            <div className="schema-column-header" style={{ width: this.props.columnWidths[this.props.columnIndex] }} onPointerDown={this.onPointerDown} ref={col => col && this.props.setColRef(this.props.columnIndex, col)}>
+            <div
+                className="schema-column-header"
+                style={{
+                    width: this.props.columnWidths[this.props.columnIndex],
+                }}
+                onPointerDown={this.onPointerDown}
+                ref={col => {
+                    if (col) {
+                        this._ref = col;
+                        this.props.setColRef(this.props.columnIndex, col);
+                    }
+                }}>
                 <div className="schema-column-resizer left" onPointerDown={e => this.props.resizeColumn(e, this.props.columnIndex)}></div>
                 <div className="schema-column-title">{this.fieldKey}</div>
 
-- 
cgit v1.2.3-70-g09d2

