Skip to content

Commit 9af32ae

Browse files
FosolFosol
committed
MMI-3238 Enhance Report Sections (bcgov#2449)
Publish tno-core:1.0.12 Add DB migration 1.3.29
1 parent fb2bb9b commit 9af32ae

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+9357
-22
lines changed

app/editor/.yarn/cache/tno-core-npm-1.0.11-ac3cb59c33-e76e3c02bf.zip renamed to app/editor/.yarn/cache/tno-core-npm-1.0.12-ad396df84f-e66d6da358.zip

2.01 MB
Binary file not shown.

‎app/editor/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@
6060
"redux-logger": "3.0.6",
6161
"styled-components": "6.1.11",
6262
"stylis": "4.3.2",
63-
"tno-core": "1.0.11"
63+
"tno-core": "1.0.12"
6464
},
6565
"devDependencies": {
6666
"@simbathesailor/use-what-changed": "2.0.0",

‎app/editor/src/features/admin/report-templates/templates/body/CustomReport.cshtml‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -330,6 +330,14 @@
330330
<img style="height:100%;width:100%;max-width:3024px" src="@src" alt="@alt" />
331331
</div>
332332
}
333+
else if (section.Value.SectionType == ReportSectionType.Data)
334+
{
335+
@* IMAGE SECTION *@
336+
var alt = section.Value.Settings.Label;
337+
<div>
338+
@(section.Value.Data)
339+
</div>
340+
}
333341

334342
@if (!horizontalCharts && !endChartGroup)
335343
{

‎app/editor/src/features/admin/reports/ReportFormSections.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {
2020
ReportHeadlineOptions,
2121
ReportOptions,
2222
ReportSectionContent,
23+
ReportSectionData,
2324
ReportSectionGallery,
2425
ReportSectionImage,
2526
ReportSectionMediaAnalytics,
@@ -185,6 +186,12 @@ export const ReportFormSections = () => {
185186
>
186187
Image
187188
</Button>
189+
<Button
190+
variant={ButtonVariant.secondary}
191+
onClick={() => handleAddSection(ReportSectionTypeName.Data)}
192+
>
193+
Data
194+
</Button>
188195
</Row>
189196
</Row>
190197
<Col>
@@ -269,6 +276,9 @@ export const ReportFormSections = () => {
269276
<Show visible={section.sectionType === ReportSectionTypeName.Image}>
270277
<ReportSectionImage index={index} />
271278
</Show>
279+
<Show visible={section.sectionType === ReportSectionTypeName.Data}>
280+
<ReportSectionData index={index} />
281+
</Show>
272282
</>
273283
)}
274284
</React.Fragment>

‎app/editor/src/features/admin/reports/ReportFormTemplate.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,7 @@ export const ReportFormTemplate: React.FC = () => {
145145
Use Default Template
146146
</Button>
147147
</Row>
148-
<label htmlFor="txa-subject">Subject Template</label>
148+
<label htmlFor="txa-subject-template">Subject Template</label>
149149
<Col className="editor subject">
150150
<Editor
151151
id="txa-subject-template"
@@ -158,7 +158,7 @@ export const ReportFormTemplate: React.FC = () => {
158158
</Col>
159159
</Col>
160160
<Col className="frm-in">
161-
<label htmlFor="txa-template">Body Template</label>
161+
<label htmlFor="txa-body-template">Body Template</label>
162162
<Col className="editor body">
163163
<Editor
164164
id="txa-body-template"

‎app/editor/src/features/admin/reports/components/ReportSectionData.tsx‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import { useFormikContext } from 'formik';
2+
import { highlight, languages } from 'prismjs';
3+
import React from 'react';
4+
import Editor from 'react-simple-code-editor';
5+
import {
6+
Checkbox,
7+
Col,
8+
FormikSelect,
9+
FormikText,
10+
FormikTextArea,
11+
IOptionItem,
12+
IReportModel,
13+
OptionItem,
14+
ReportSectionDataTypeOptions,
15+
Row,
16+
} from 'tno-core';
17+
18+
export interface IReportSectionDataProps {
19+
index: number;
20+
}
21+
22+
export const ReportSectionData = ({ index }: IReportSectionDataProps) => {
23+
const { values, setFieldValue } = useFormikContext<IReportModel>();
24+
25+
const [dataTypeOptions] = React.useState<IOptionItem[]>(ReportSectionDataTypeOptions);
26+
27+
React.useEffect(() => {
28+
setFieldValue(`sections.${index}.settings.preload`, true);
29+
}, [setFieldValue, index]);
30+
31+
return (
32+
<Col gap="1rem" className="section">
33+
<FormikText
34+
name={`sections.${index}.settings.label`}
35+
label="Heading"
36+
tooltip="A heading label to display at the beginning of the section"
37+
maxLength={100}
38+
/>
39+
<FormikTextArea
40+
name={`sections.${index}.description`}
41+
label="Summary"
42+
tooltip="The summary will be displayed at the beginning of the section"
43+
placeholder="Executive summary for this section or the whole report"
44+
/>
45+
<Checkbox
46+
name={`sections.${index}.settings.inTableOfContents`}
47+
label="Include in Table of Contents"
48+
checked={
49+
values.sections[index].settings.inTableOfContents === undefined
50+
? true
51+
: values.sections[index].settings.inTableOfContents
52+
}
53+
onChange={(e) => {
54+
setFieldValue(`sections.${index}.settings.inTableOfContents`, e.target.checked);
55+
}}
56+
/>
57+
<Col>
58+
<Row>
59+
<Col flex="1">
60+
<FormikText required label="Url" name={`sections.${index}.settings.url`} />
61+
</Col>
62+
<FormikSelect
63+
name={`sections.${index}.settings.dataType`}
64+
label="Data Type"
65+
required
66+
options={dataTypeOptions}
67+
value={
68+
dataTypeOptions.find((o) => o.value === values.sections[index].settings.dataType) ??
69+
''
70+
}
71+
onChange={(newValue) => {
72+
const option = newValue as OptionItem;
73+
const order = dataTypeOptions.find((f) => f.value === option?.value);
74+
if (order) setFieldValue(`sections.${index}.settings.dataType`, order.value);
75+
}}
76+
/>
77+
</Row>
78+
<FormikText
79+
label="Path to Property"
80+
name={`sections.${index}.settings.dataProperty`}
81+
tooltip="XPath to the property in the data you want displayed."
82+
placeholder="Optional XPath to a single value. If a path is provided it will be used instead of the template."
83+
/>
84+
<Col className="code">
85+
<label htmlFor="txa-data-template">Razor Template</label>
86+
<Col className="editor data-template">
87+
<Editor
88+
id="txa-data-template"
89+
value={values.sections[index].settings.dataTemplate ?? ''}
90+
onValueChange={(code) =>
91+
setFieldValue(`sections.${index}.settings.dataTemplate`, code)
92+
}
93+
highlight={(code) => {
94+
return highlight(code, languages.cshtml, 'razor');
95+
}}
96+
/>
97+
</Col>
98+
</Col>
99+
</Col>
100+
</Col>
101+
);
102+
};

‎app/editor/src/features/admin/reports/components/ReportSectionImage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export const ReportSectionImage = ({ index }: IReportSectionImageProps) => {
2323
placeholder="Executive summary for this section or the whole report"
2424
/>
2525
<Col>
26-
<FormikText label="Url" name={`sections.${index}.settings.url`} />
26+
<FormikText label="Url" name={`sections.${index}.settings.url`} required />
2727
</Col>
2828
<Checkbox
2929
name={`sections.${index}.settings.inTableOfContents`}

‎app/editor/src/features/admin/reports/components/SectionIcon.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { BiSolidFileJson } from 'react-icons/bi';
12
import { FaAlignJustify, FaChartPie, FaImage, FaList, FaNewspaper } from 'react-icons/fa6';
23
import { ReportSectionTypeName } from 'tno-core';
34

@@ -18,5 +19,7 @@ export const SectionIcon = ({ type }: ISectionIconProps) => {
1819
return <FaImage />;
1920
} else if (type === ReportSectionTypeName.Image) {
2021
return <FaImage />;
22+
} else if (type === ReportSectionTypeName.Data) {
23+
return <BiSolidFileJson />;
2124
} else return null;
2225
};

‎app/editor/src/features/admin/reports/components/SectionLabel.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,5 +49,12 @@ export const SectionLabel = ({ section }: ISectionLabelProps) => {
4949
Image: {section.settings.label}
5050
</Row>
5151
);
52+
} else if (section.sectionType === ReportSectionTypeName.Data) {
53+
return (
54+
<Row gap="0.25rem" alignItems="center">
55+
<SectionIcon type={section.sectionType} />
56+
Data: {section.settings.label}
57+
</Row>
58+
);
5259
} else return <>Unknown</>;
5360
};

‎app/editor/src/features/admin/reports/components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ export * from './ReportContentOptions';
22
export * from './ReportHeadlineOptions';
33
export * from './ReportOptions';
44
export * from './ReportSectionContent';
5+
export * from './ReportSectionData';
56
export * from './ReportSectionGallery';
67
export * from './ReportSectionImage';
78
export * from './ReportSectionMediaAnalytics';

0 commit comments

Comments
 (0)