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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
|
//IGNORE FOR NOW, CURRENTLY NOT USED IN SCRAPBOOK IMPLEMENTATION
import { action, makeObservable, observable } from 'mobx';
import * as React from 'react';
import { RichTextField } from '../../../../fields/RichTextField';
import { Docs } from '../../../documents/Documents';
import { DocumentType } from '../../../documents/DocumentTypes';
import { ViewBoxAnnotatableComponent } from '../../DocComponent';
import { FieldView, FieldViewProps } from '../FieldView';
import { FormattedTextBox, FormattedTextBoxProps } from '../formattedText/FormattedTextBox';
export class ScrapbookVersionTwo extends ViewBoxAnnotatableComponent<FieldViewProps>() {
@observable scrapbookDate: string;
public static LayoutString(fieldStr: string) {
return FieldView.LayoutString(ScrapbookVersionTwo, fieldStr);
}
constructor(props: FormattedTextBoxProps) {
super(props);
makeObservable(this);
this.scrapbookDate = this.getFormattedDate();
console.log('Constructor: Setting initial title and text...');
this.setDailyTitle();
this.setDailyText();
}
getFormattedDate(): string {
const date = new Date().toLocaleDateString(undefined, {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
});
console.log('getFormattedDate():', date);
return date;
}
@action
setDailyTitle() {
console.log('setDailyTitle() called...');
console.log('Current title before update:', this.dataDoc.title);
if (!this.dataDoc.title || this.dataDoc.title !== this.scrapbookDate) {
console.log('Updating title to:', this.scrapbookDate);
this.dataDoc.title = this.scrapbookDate;
}
console.log('New title after update:', this.dataDoc.title);
}
@action
setDailyText() {
console.log('setDailyText() called...');
const placeholderText = 'Start writing here...';
const initialText = `Scrapbook - $\n${placeholderText}`;
console.log('Checking if dataDoc has text field...');
const styles = {
bold: true, // Make the journal date bold
color: 'red', // Set the journal date color to blue
fontSize: 12, // Set the font size to 18px for the whole text
display: 'grid',
gridTemplateColumns: 'repeat(auto-fill, minmax(100px, 1fr))',
gap: '8px',
padding: '10px',
background: '#fafafa',
width: '100%',
height: '100%',
};
console.log('Setting new text field with:', initialText);
this.dataDoc[this.fieldKey] = RichTextField.textToRtf(
initialText,
undefined, // No image DocId
styles, // Pass the styles object here
placeholderText.length // The position for text selection
);
console.log('Current text field:', this.dataDoc[this.fieldKey]);
}
componentDidMount(): void {
console.log('componentDidMount() triggered...');
// bcz: This should be moved into Docs.Create.DailyJournalDocument()
// otherwise, it will override all the text whenever the note is reloaded
this.setDailyTitle();
this.setDailyText();
}
render() {
return (
<div
style={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fill, minmax(100px, 1fr))',
gap: '8px',
padding: '10px',
background: '#fafafa',
width: '100%',
height: '100%',
}}
>
<FormattedTextBox {...this._props} fieldKey={'text'} Document={this.Document} TemplateDataDocument={undefined} />
</div>
);
}
}
Docs.Prototypes.TemplateMap.set(DocumentType.SCRAPBOOK, {
layout: { view: ScrapbookVersionTwo, dataField: 'text' },
options: {
acl: '',
_height: 35,
_xMargin: 10,
_yMargin: 10,
_layout_autoHeight: true,
_layout_nativeDimEditable: true,
_layout_reflowVertical: true,
_layout_reflowHorizontal: true,
defaultDoubleClick: 'ignore',
systemIcon: 'BsFileEarmarkTextFill',
},
});
|
