[frontend/backend] use markdown

Signed-off-by: Marine LM <[email protected]>
OpenBAS-Platform · Sep 27, 2024 · 27c976d · 27c976d
1 parent b2c77f6
commit 27c976d
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 27 deletions.
diff --git a/openbas-front/src/admin/components/components/reports/ReportGlobalObservation.tsx b/openbas-front/src/admin/components/components/reports/ReportGlobalObservation.tsx
@@ -0,0 +1,42 @@
+import React, { CSSProperties, useState } from 'react';
+import { Paper, Typography } from '@mui/material';
+import MarkDownField from '../../../../components/fields/MarkDownField';
+import ExpandableMarkdown from '../../../../components/ExpandableMarkdown';
+
+interface Props {
+  label: string
+  initialValue: string,
+  style?: CSSProperties,
+  onBlur: (observation: string) => void,
+  canWrite?: boolean
+}
+
+const ReportGlobalObservation: React.FC<Props> = ({
+  label,
+  initialValue = '',
+  style = {},
+  onBlur,
+  canWrite,
+}) => {
+  const [globalObservation, setGlobalObservationRef] = useState<string>(initialValue);
+
+  return (
+    <div style={style}>
+      <Typography variant="h4" gutterBottom>
+        {label}
+      </Typography>
+
+      <Paper variant="outlined" sx={{ ...!canWrite && { padding: '10px 15px 10px 15px' } }}>
+        {canWrite
+          ? <MarkDownField
+              onChange={(value: string) => setGlobalObservationRef(value)}
+              initialValue={globalObservation}
+              onBlur={() => onBlur(globalObservation)}
+            /> : <ExpandableMarkdown limit={300} source={globalObservation}/>
+        }
+      </Paper>
+    </div>
+  );
+};
+
+export default ReportGlobalObservation;
diff --git a/openbas-front/src/admin/components/simulations/simulation/reports/ExerciseReportContent.tsx b/openbas-front/src/admin/components/simulations/simulation/reports/ExerciseReportContent.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Paper, Typography } from '@mui/material';
 import type { Exercise, ExpectationResultsByType, InjectResultDTO, Report, ReportInformation, ReportInput } from '../../../../../utils/api-types';
 import { useAppDispatch } from '../../../../../utils/hooks';
@@ -25,7 +25,7 @@ import InjectReportResult from './InjectReportResult';
 import { updateReportGlobalObservation, updateReportInjectCommentForExercise } from '../../../../../actions/reports/report-actions';
 import LessonsCategories from '../../../lessons/exercises/LessonsCategories';
 import ExerciseDistribution from '../overview/ExerciseDistribution';
-import SimpleRichTextField from '../../../../../components/fields/SimpleRichTextField';
+import ReportGlobalObservation from '../../../components/reports/ReportGlobalObservation';
 
 interface Props {
   report: Report,
@@ -37,11 +37,10 @@ const ExerciseReportContent: React.FC<Props> = ({ report, exerciseId, canWrite =
   const dispatch = useAppDispatch();
   const { t } = useFormatter();
   const [loading, setLoading] = useState(true);
-  const globalObservationRef = useRef<string>(report?.report_global_observation ?? '');
 
-  const saveGlobalObservation = () => updateReportGlobalObservation(exerciseId, report.report_id, {
+  const saveGlobalObservation = (comment: string) => updateReportGlobalObservation(exerciseId, report.report_id, {
     report_informations: report.report_informations,
-    report_global_observation: globalObservationRef.current,
+    report_global_observation: comment,
     report_name: report.report_name,
   } as ReportInput);
 
@@ -108,7 +107,7 @@ const ExerciseReportContent: React.FC<Props> = ({ report, exerciseId, canWrite =
   return (
     <div id={`reportId_${report.report_id}`} style={{ padding: 20, display: 'flex', flexFlow: 'wrap', maxWidth: '1400px', margin: 'auto' }}>
       <div style={{ width: '100%', textAlign: 'center', fontSize: 25, fontWeight: 500, margin: '10px' }}>
-        {report?.report_name}
+        {report.report_name}
       </div>
       {displayModule(ReportInformationType.MAIN_INFORMATION)
         && <div style={{ width: '50%', paddingRight: '25px' }}>
@@ -140,27 +139,13 @@ const ExerciseReportContent: React.FC<Props> = ({ report, exerciseId, canWrite =
         )
       }
       {displayModule(ReportInformationType.GLOBAL_OBSERVATION)
-        && <div style={{ width: '100%', marginTop: 20 }}>
-          <Typography variant="h4" gutterBottom>
-            {t('Global observation')}
-          </Typography>
-            {canWrite
-              ? <SimpleRichTextField
-                  value={globalObservationRef.current}
-                  onChange={(value: string) => {
-                    globalObservationRef.current = value;
-                  }}
-                  style={{ height: 200, width: '100%' }}
-                  onBlur={saveGlobalObservation}
-                /> : <Paper variant="outlined" sx={{ padding: '10px 15px 10px 15px' }}>
-                  {globalObservationRef.current
-                    ? <div dangerouslySetInnerHTML={{ __html: globalObservationRef.current }}/>
-                    : <div style={{ textTransform: 'none' }}>
-                      {t('-')}
-                    </div>}
-                </Paper>
-            }
-          </div>
+        && <ReportGlobalObservation
+          label={t('Global observation')}
+          initialValue={report.report_global_observation || ''}
+          onBlur={saveGlobalObservation}
+          style={{ width: '100%', marginTop: 20 }}
+          canWrite={canWrite}
+           />
       }
       {displayModule(ReportInformationType.PLAYER_SURVEYS)
         && <LessonsCategories

diff --git a/openbas-front/src/components/fields/MarkDownField.tsx b/openbas-front/src/components/fields/MarkDownField.tsx
@@ -7,12 +7,14 @@ import { useFormatter } from '../i18n';
 interface Props {
   disabled?: boolean;
   onChange: (value: string) => void;
+  onBlur?: () => void;
   initialValue: string;
 }
 
 const MarkDownField: React.FC<Props> = ({
   disabled = false,
   onChange,
+  onBlur = () => {},
   initialValue,
 }) => {
   const { t } = useFormatter();
@@ -73,6 +75,7 @@ const MarkDownField: React.FC<Props> = ({
       }}
       preview={isEdit ? 'edit' : 'preview'}
       onChange={(val) => onChange(val || '')}
+      onBlur={onBlur}
       commands={[
         writeCommand,
         previewCommand,