1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
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',
},
});
|
