Update report editor to the ui

This commit is contained in:
Nate Kelley 2025-08-07 16:44:49 -06:00
parent 7a45e20903
commit 69eb14c836
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
2 changed files with 25 additions and 4 deletions

View File

@ -54,7 +54,15 @@ export const ReportEditor = React.memo(
const editor = useReportEditor({ value, disabled, useFixedToolbarKit, onReady }); const editor = useReportEditor({ value, disabled, useFixedToolbarKit, onReady });
const onReset = useMemoizedFn(() => { const onReset = useMemoizedFn(() => {
editor?.tf.reset(); if (!editor) {
console.warn('Editor not yet initialized');
return;
}
if (readOnly) {
console.warn('Editor is read only');
return;
}
editor.tf.reset();
}); });
// Optionally expose the editor instance to the parent via ref // Optionally expose the editor instance to the parent via ref
@ -62,6 +70,10 @@ export const ReportEditor = React.memo(
const onValueChangePreflight = useMemoizedFn( const onValueChangePreflight = useMemoizedFn(
({ value, editor }: { value: Value; editor: TPlateEditor<Value, AnyPluginConfig> }) => { ({ value, editor }: { value: Value; editor: TPlateEditor<Value, AnyPluginConfig> }) => {
if (readOnly) {
console.warn('Editor is read only');
return;
}
onValueChange?.(cleanValueToReportElements(value)); onValueChange?.(cleanValueToReportElements(value));
} }
); );

View File

@ -7,7 +7,8 @@ import { ReportPageHeader } from './ReportPageHeader';
import { useMemoizedFn } from '@/hooks/useMemoizedFn'; import { useMemoizedFn } from '@/hooks/useMemoizedFn';
import { useDebounceFn } from '@/hooks/useDebounce'; import { useDebounceFn } from '@/hooks/useDebounce';
import type { ReportElements } from '@buster/server-shared/reports'; import type { ReportElements } from '@buster/server-shared/reports';
import DynamicReportEditor from '@/components/ui/report/DynamicReportEditor'; //import DynamicReportEditor from '@/components/ui/report/DynamicReportEditor';
import { ReportEditor } from '@/components/ui/report/ReportEditor';
export const ReportPageController: React.FC<{ export const ReportPageController: React.FC<{
reportId: string; reportId: string;
@ -22,12 +23,20 @@ export const ReportPageController: React.FC<{
const { mutate: updateReport } = useUpdateReport(); const { mutate: updateReport } = useUpdateReport();
const onChangeName = useMemoizedFn((name: string) => { const onChangeName = useMemoizedFn((name: string) => {
if (!report) {
console.warn('Report not yet fetched');
return;
}
updateReport({ reportId, name }); updateReport({ reportId, name });
}); });
const { run: debouncedUpdateReport } = useDebounceFn(updateReport, { wait: 650 }); const { run: debouncedUpdateReport } = useDebounceFn(updateReport, { wait: 650 });
const onChangeContent = useMemoizedFn((content: ReportElements) => { const onChangeContent = useMemoizedFn((content: ReportElements) => {
if (!report) {
console.warn('Report not yet fetched');
return;
}
debouncedUpdateReport({ reportId, content }); debouncedUpdateReport({ reportId, content });
}); });
@ -39,11 +48,11 @@ export const ReportPageController: React.FC<{
onChangeName={onChangeName} onChangeName={onChangeName}
/> />
<DynamicReportEditor <ReportEditor
// ref={editor} // ref={editor}
value={content} value={content}
onValueChange={onChangeContent} onValueChange={onChangeContent}
readOnly={readOnly} readOnly={readOnly || !report}
className="px-0!" className="px-0!"
/> />
</div> </div>