update texteditor

This commit is contained in:
2024-03-12 10:16:03 +07:00
parent 9f42583e9d
commit 8ed2425a55
2 changed files with 38 additions and 20 deletions

View File

@@ -12,7 +12,7 @@ import { LoadingButton } from "@mui/lab";
* ============================================ * ============================================
*/ */
import Page from '@/components/Page'; import Page from '@/components/Page';
import { FormProvider, RHFTextField } from '@/components/hook-form'; import { FormProvider, RHFEditor, RHFTextField } from '@/components/hook-form';
import RHFDatePickerV2 from '@/components/hook-form/RHFDatePickerV2'; import RHFDatePickerV2 from '@/components/hook-form/RHFDatePickerV2';
/** /**
@@ -293,7 +293,7 @@ export default function DetailMonitoringList() {
Subject* : Subject* :
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} sx={{display: 'flex', gap: 1}}> {/* <Grid item xs={12} sx={{display: 'flex', gap: 1}}>
<RHFTextField <RHFTextField
id="subject" id="subject"
name='subject' name='subject'
@@ -301,6 +301,9 @@ export default function DetailMonitoringList() {
multiline multiline
rows={4} rows={4}
/> />
</Grid> */}
<Grid item xs={12}>
<RHFEditor id="subject" name="subject" placeholder="Subjective" />
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>
@@ -313,7 +316,7 @@ export default function DetailMonitoringList() {
Objective Objective
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} sx={{display: 'flex', gap: 1}}> {/* <Grid item xs={12} sx={{display: 'flex', gap: 1}}>
<RHFTextField <RHFTextField
id="objective" id="objective"
name='objective' name='objective'
@@ -321,6 +324,9 @@ export default function DetailMonitoringList() {
multiline multiline
rows={4} rows={4}
/> />
</Grid> */}
<Grid item xs={12}>
<RHFEditor id="objective" name="objective" placeholder="Objective"/>
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
<Grid container spacing={3}> <Grid container spacing={3}>
@@ -427,7 +433,7 @@ export default function DetailMonitoringList() {
Analysis* : Analysis* :
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} sx={{display: 'flex', gap: 1}}> {/* <Grid item xs={12} sx={{display: 'flex', gap: 1}}>
<RHFTextField <RHFTextField
id="analysis" id="analysis"
name='analysis' name='analysis'
@@ -435,6 +441,9 @@ export default function DetailMonitoringList() {
multiline multiline
rows={4} rows={4}
/> />
</Grid> */}
<Grid item xs={12}>
<RHFEditor id="analysis" name="analysis" placeholder="Analysis" />
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>
@@ -453,12 +462,10 @@ export default function DetailMonitoringList() {
return ( return (
<Grid key={field.id} container sx={{ mb: 3 }}> <Grid key={field.id} container sx={{ mb: 3 }}>
<Grid item xs={11}> <Grid item xs={11}>
<RHFTextField <RHFEditor
id="analysis" id={`medical_plan_str-${index}`}
name={`medical_plan.${index}.medical_plan_str`} name={`medical_plan.${index}.medical_plan_str`}
placeholder='Medical Plan' placeholder='Medical Plan'
multiline
rows={4}
/> />
</Grid> </Grid>
{ {
@@ -512,8 +519,8 @@ export default function DetailMonitoringList() {
return ( return (
<Grid key={field.id} container sx={{ mb: 3 }}> <Grid key={field.id} container sx={{ mb: 3 }}>
<Grid item xs={11}> <Grid item xs={11}>
<RHFTextField <RHFEditor
id="analysis" id={`non_medikamentosa_plan-${index}`}
name={`non_medikamentosa_plan.${index}.non_medikamentosa_plan_str`} name={`non_medikamentosa_plan.${index}.non_medikamentosa_plan_str`}
placeholder='Non Medikamentosa' placeholder='Non Medikamentosa'
multiline multiline
@@ -707,14 +714,12 @@ export default function DetailMonitoringList() {
Examination Examination
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} sx={{display: 'flex', gap: 1}}> <Grid item xs={12}>
<RHFTextField <RHFEditor
id="examination" id="examination"
name='examination' name='examination'
placeholder='examination' placeholder='examination'
label='Examination' label='Examination'
multiline
rows={4}
/> />
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>

View File

@@ -38,6 +38,7 @@ import MuiDialog from '@/components/MuiDialog';
import { DialogActions } from '@mui/material'; import { DialogActions } from '@mui/material';
import axios from '@/utils/axios'; import axios from '@/utils/axios';
import { enqueueSnackbar } from 'notistack'; import { enqueueSnackbar } from 'notistack';
import { escape } from 'lodash';
export default function DetailMonitoringList() { export default function DetailMonitoringList() {
@@ -172,6 +173,18 @@ export default function DetailMonitoringList() {
setOrganizationId(organization_id); setOrganizationId(organization_id);
} }
const clearCodeHtml = (text:any) => {
return new DOMParser().parseFromString(text, 'text/html').documentElement.textContent
}
const renderHTML = (data:string) => {
return (
<div style={{marginLeft: 20}}
dangerouslySetInnerHTML={{__html: data}}
/>
);
}
return ( return (
<Page title={pageTitle} sx={{ px: 2 }}> <Page title={pageTitle} sx={{ px: 2 }}>
<Grid container gap={6}> <Grid container gap={6}>
@@ -255,7 +268,7 @@ export default function DetailMonitoringList() {
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
<Typography variant="body2" color={"GrayText"}> <Typography variant="body2" color={"GrayText"}>
{row.subject} {clearCodeHtml(row.subject)}
</Typography> </Typography>
</Grid> </Grid>
</Grid> </Grid>
@@ -270,7 +283,7 @@ export default function DetailMonitoringList() {
</Grid> </Grid>
<Grid item xs={12} paddingY={2}> <Grid item xs={12} paddingY={2}>
<Typography variant="body2" color={"GrayText"}> <Typography variant="body2" color={"GrayText"}>
{row.object} {clearCodeHtml(row.object)}
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
@@ -329,7 +342,7 @@ export default function DetailMonitoringList() {
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
<Typography variant="body2" color={"GrayText"}> <Typography variant="body2" color={"GrayText"}>
{row.analysis} {clearCodeHtml(row.analysis)}
</Typography> </Typography>
</Grid> </Grid>
</Grid> </Grid>
@@ -348,7 +361,7 @@ export default function DetailMonitoringList() {
row.medical_plan?.map((data, index) => { row.medical_plan?.map((data, index) => {
return ( return (
<ListItem key={index}> <ListItem key={index}>
<FiberManualRecord sx={{ fontSize: '8px', mr: '10px' }} /> {data.medical_plan_str} <FiberManualRecord sx={{ fontSize: '8px', mr: '10px' }} /> {renderHTML(data.medical_plan_str)}
</ListItem> </ListItem>
) )
}) })
@@ -371,7 +384,7 @@ export default function DetailMonitoringList() {
row.non_medikamentosa_plan?.map((data, index) => { row.non_medikamentosa_plan?.map((data, index) => {
return ( return (
<ListItem key={index}> <ListItem key={index}>
<FiberManualRecord sx={{ fontSize: '8px', mr: '10px' }} /> {data.non_medikamentosa_plan_str} <FiberManualRecord sx={{ fontSize: '8px', mr: '10px' }} /> {renderHTML(data.non_medikamentosa_plan_str)}
</ListItem> </ListItem>
) )
}) })
@@ -420,7 +433,7 @@ export default function DetailMonitoringList() {
</Grid> </Grid>
<Grid item xs={6}> <Grid item xs={6}>
<Typography variant="body2" color={"GrayText"}> <Typography variant="body2" color={"GrayText"}>
{row.examination != null ? row.examination : '-' } {row.examination != null ? clearCodeHtml(row.examination) : '-' }
</Typography> </Typography>
</Grid> </Grid>
</Grid> </Grid>