attempting to integrate scrapbooks

1 files changed, 106 insertions, 0 deletions

diff --git a/src/client/views/nodes/scrapbook/ScrapbookBox.tsx b/src/client/views/nodes/scrapbook/ScrapbookBox.tsx
new file mode 100644
index 000000000..56cfcda70
--- /dev/null
+++ b/src/client/views/nodes/scrapbook/ScrapbookBox.tsx
@@ -0,0 +1,106 @@
+import { makeObservable } from 'mobx';
+import * as React from 'react';
+import { ViewBoxAnnotatableComponent } from '../../DocComponent';
+import { FieldView, FieldViewProps } from '../FieldView';
+import { Docs } from '../../../documents/Documents';
+import { DocumentType } from '../../../documents/DocumentTypes';
+import { action, observable } from 'mobx';
+import { DocListCast } from '../../../../fields/Doc';
+import { Doc } from '../../../../fields/Doc';
+import { DocumentView } from '../DocumentView';
+import { FormattedTextBox } from '../formattedText/FormattedTextBox';
+import { List } from '../../../../fields/List';
+// Scrapbook view: a container that lays out its child items in a grid/template
+export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
+    @observable createdDate: string;
+
+    constructor(props: FieldViewProps) {
+        super(props);
+        makeObservable(this);
+        this.createdDate = this.getFormattedDate();
+  
+        // ensure we always have a List<Doc> in dataDoc['items']
+        if (!this.dataDoc[this.fieldKey]) {
+            this.dataDoc[this.fieldKey] = new List<Doc>();
+        }
+        this.createdDate = this.getFormattedDate();
+        this.setTitle();
+    }
+
+    public static LayoutString(fieldStr: string) {
+        return FieldView.LayoutString(ScrapbookBox, fieldStr);
+    }
+
+
+    
+    
+     
+    
+
+    getFormattedDate(): string {
+        return new Date().toLocaleDateString(undefined, {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+        });
+    }
+
+    @action
+    setTitle() {
+        const title = `Scrapbook - ${this.createdDate}`;
+        if (this.dataDoc.title !== title) {
+            this.dataDoc.title = title;
+        }
+    }
+
+    componentDidMount() {
+        this.setTitle();
+        if (!this.dataDoc[this.fieldKey]) {
+            this.dataDoc[this.fieldKey] = new List<Doc>();
+        }
+    }
+
+    render() {
+        // cast into an array even if empty
+        const items: Doc[] = DocListCast(this.dataDoc[this.fieldKey]);
+    
+        return (
+            <div style={{ background: 'beige', width: '100%', height: '100%' }}>
+                        
+            </div>
+        
+        //   <div
+        //     style={{
+        //     }}
+        //   >
+        //     {items.length === 0
+        //       ? <div style={{color:'#888',fontStyle:'italic'}}>Drop docs here</div>
+        //       : items.map((childDoc, idx) => (
+        //           <DocumentView
+        //             key={String(childDoc.id ?? idx)}
+        //             {...this._props}
+        //             Document={childDoc}
+        //           />
+        //         ))
+        //     }
+        //   </div>
+        );
+      }
+}
+
+
+// Register scrapbook
+Docs.Prototypes.TemplateMap.set(DocumentType.SCRAPBOOK, {
+    layout: { view: ScrapbookBox, dataField: 'items' },
+    options: {
+        acl: '',
+        _height: 200,
+        _xMargin: 10,
+        _yMargin: 10,
+        _layout_autoHeight: true,
+        _layout_reflowVertical: true,
+        _layout_reflowHorizontal: true,
+        defaultDoubleClick: 'ignore',
+        systemIcon: 'BsImages',
+    },
+});