From 32771d4b202a8552815c7f4459d5ac5142401292 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 3 Jul 2024 04:40:55 -0400
Subject: schemacell refactor started

---
 .../collectionSchema/SchemaCellField.tsx           | 119 ++++++++++++++++++++-
 .../collectionSchema/SchemaTableCell.tsx           |   2 +-
 2 files changed, 116 insertions(+), 5 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
index e1059b8fc..5048bf899 100644
--- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -8,6 +8,15 @@ import { FieldView, FieldViewProps } from "../../nodes/FieldView";
 import { ObjectField } from "../../../../fields/ObjectField";
 import { Doc } from "../../../../fields/Doc";
 import { DocumentView } from "../../nodes/DocumentView";
+import { date } from "serializr";
+import { createRoot } from "react-dom/client";
+import DatePicker from "react-datepicker";
+import { emptyFunction } from "../../../../Utils";
+import { DateField } from "../../../../fields/DateField";
+
+enum EleType {
+    plainText, fieldReference, date, boolean
+}
 
 export interface SchemaCellFieldProps {
     contents: any;
@@ -34,6 +43,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
     @observable _displayedContent = '';
     @observable _inCellSelectMode: boolean = false;
     @observable _dependencyMessageShown: boolean = false;
+    @observable _displayedElements: JSX.Element[] = [];
 
     constructor(props: SchemaCellFieldProps) {
         super(props);
@@ -101,6 +111,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
     }
 
     componentDidUpdate(prevProps: Readonly<SchemaCellFieldProps>) {
+        this.addReactComponents();
         super.componentDidUpdate(prevProps);
         if (this._editing && this._props.editing === false) {
             this.finalizeEdit(false, true, false);
@@ -116,12 +127,31 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         this.finalizeEdit(false, true, false);
     }
 
-    generateSpan = (text: string, cell: HTMLDivElement | undefined) => {
+    addReactComponents = () => {
+        if (!this._inputref) return;
+
+        const dateRefs = Array.from(this._inputref.querySelectorAll('.date-placeholder'));
+
+        dateRefs.forEach(ref => {
+            const root = createRoot(ref);
+            root.render(<DatePicker dateFormat="Pp" selected={new Date()} onChange={emptyFunction} />);
+        })
+    }
+
+    generateSpan = (text: string, cell: HTMLDivElement | undefined): JSX.Element => {
         const selfRef = text === this.selfRefPattern;
-        return `<span style="text-decoration: ${selfRef ? 'underline' : 'none'}; text-decoration-color: red; color: ${selfRef ? 'gray' : cell?.style.borderTop.replace('2px solid', '')}">${text}</span>`;
+        return (
+            <span style={{
+                textDecoration: selfRef ? 'underline' : 'none', 
+                textDecorationColor: 'red', 
+                color: selfRef ? 'gray' : cell?.style.borderTop.replace('2px solid', '')}}>
+                {text}
+            </span>
+        );
     }
 
     makeSpans = (content: string) => {
+        const spans: JSX.Element[] = [];
         let chunkedText = content;
 
         const pattern = /(this|d(\d+))\.(\w+)/g;
@@ -140,13 +170,89 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
 
         let matchNum = 0;
         matches.forEach((match: string) => {
-            chunkedText = chunkedText.replace(match, this.generateSpan(match, cells.get(match)));
+            chunkedText = chunkedText.replace(match, '');
+            spans.push(this.generateSpan(match, cells.get(match)));
             ++matchNum;
         })
 
+        chunkedText = chunkedText.replace(/{{date}}/g, `<span class="date-placeholder">placeholder text</span>`);
+        console.log(chunkedText)
+
         return chunkedText;
     }
 
+    verifyCellRef = (text: string): [string, HTMLDivElement | undefined] | undefined => {
+        const pattern = /(this|d(\d+))\.(\w+)/g;
+        let matchedText: string = '';
+        let matchedCell: HTMLDivElement | undefined = undefined; 
+        let match: RegExpExecArray | null;
+
+        while ((match = pattern.exec(text)) !== null) {
+            const cells = this._props.getCells(match[0]);
+            if (cells.length) {
+                matchedText = match[0];
+                matchedCell = cells[0];
+            }
+        }
+
+        if (!matchedText && !matchedCell) return undefined;
+        else return [matchedText, matchedCell];
+    }
+
+    elementsFromText = (chunks: string[]): JSX.Element[] => {
+        const eles: any[] = [];
+
+        chunks.forEach(text => {
+            const cellRef = this.verifyCellRef(text);
+            if (cellRef) {
+                eles.push(this.generateSpan(cellRef[0], cellRef[1]));
+            } else if (!text.replace('{{date}}', '')){
+                eles.push(<DatePicker dateFormat="Pp" selected={new Date()} onChange={emptyFunction} />);
+            } else if (!text.replace('{{boolean}}', '')) {
+                eles.push(<div>boolean thing</div>);
+            } else {
+                eles.push(<span>{text}</span>);
+            }
+        });
+
+        return eles;
+    }
+
+    parseElements = () => {
+        let string: string = this._unrenderedContent;
+        if (string.startsWith(':')) string = string.slice(1);
+        if (string.startsWith('=')) string = string.slice(1);
+
+        const chunks: string[] = [];
+
+        let subStr: string = '';
+        let currChar = '';
+        for (let i = 0; i < string.length; i++){
+            currChar = string[i];
+            if ((currChar === ' ' && subStr.trim()) || (currChar !== ' ' && !subStr.trim())) {
+                chunks.push(subStr);
+                subStr = currChar;
+            } else {
+                subStr += currChar;
+            }
+        }
+
+        if (subStr) {chunks.push(subStr)};
+
+        return this.elementsFromText(chunks);
+    }
+
+    // `<input
+    //     style={{ marginRight: 4 }}
+    //     type="checkbox"
+    //     checked={BoolCast(this._props.Document[this._props.fieldKey])}
+    //     onChange={undoBatch((value: React.ChangeEvent<HTMLInputElement> | undefined) => {
+    //         if ((value?.nativeEvent as any).shiftKey) {
+    //             this._props.setColumnValues(this._props.fieldKey.replace(/^_/, ''), (color === 'black' ? '=' : '') + (value?.target?.checked.toString() ?? ''));
+    //         } else Doc.SetField(this._props.Document, this._props.fieldKey.replace(/^_/, ''), (color === 'black' ? '=' : '') + (value?.target?.checked.toString() ?? ''));
+    //     })}
+    // />`
+
     @action 
     setContent = (content: string, restoreCursorPos?: boolean) => {
         const pos = this.cursorPosition;
@@ -235,6 +341,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         this._props.highlightCells?.(targVal);
         if (this.shouldUpdate(prevVal, targVal)) {this.setContent(targVal, true)};
         this.setupRefSelect(this.refSelectConditionMet);
+        console.log(this.parseElements());
     };
 
     setupRefSelect = (enabled: boolean) => {
@@ -351,8 +458,12 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             onClick={e => e.stopPropagation}
             onPointerUp={e => e.stopPropagation}
             onPointerMove={e => {e.stopPropagation(); e.preventDefault()}}
-            dangerouslySetInnerHTML={{ __html: this._displayedContent }}
+            suppressContentEditableWarning={true}
+            //dangerouslySetInnerHTML={{ __html: this._displayedContent }}
             >
+                {this.parseElements().map((ele, index) => {
+                    return <div key={index}>{ele}</div>
+                })}
             </div>
         );
     }
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index e2a05da7f..7d29e40cc 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -389,7 +389,7 @@ export class SchemaDateCell extends ObservableReactComponent<SchemaTableCellProp
         const { pointerEvents } = SchemaTableCell.renderProps(this._props);
         return (
             <>
-                <div style={{ pointerEvents: 'none' }}>
+                <div style={{ pointerEvents: 'none'}}>
                     <DatePicker dateFormat="Pp" selected={this.date?.date ?? Date.now()} onChange={emptyFunction} />
                 </div>
                 {pointerEvents === 'none' ? null : (
-- 
cgit v1.2.3-70-g09d2