14/08/23 - 22h

recette2
cherif 2023-08-14 22:03:30 +02:00
parent fa961ebc3d
commit b2fb47e297
2 changed files with 170 additions and 37 deletions

View File

@ -3793,8 +3793,10 @@ const DisplayPartnerSession = (props) => {
disabled={false} disabled={false}
className="disabled_style enable_style" className="disabled_style enable_style"
value={p_session_ondemande} value={p_session_ondemande}
onChange={(e) => {setp_session_ondemande(e.target.value); onChange={(e) => {
IssessionChanged();}} setp_session_ondemande(e.target.value);
IssessionChanged();
}}
> >
<MenuItem value="1" style={{ "paddingLeft": "5px", "textAlign": "left" }}>Oui &nbsp;&nbsp;</MenuItem> <MenuItem value="1" style={{ "paddingLeft": "5px", "textAlign": "left" }}>Oui &nbsp;&nbsp;</MenuItem>
<MenuItem value="0" style={{ "paddingLeft": "5px", "textAlign": "left" }}>Non &nbsp;</MenuItem> <MenuItem value="0" style={{ "paddingLeft": "5px", "textAlign": "left" }}>Non &nbsp;</MenuItem>
@ -3833,19 +3835,47 @@ const DisplayPartnerSession = (props) => {
value={p_session_status} value={p_session_status}
onChange={(e) => { onChange={(e) => {
setp_session_status(e.target.value); setp_session_status(e.target.value);
IssessionChanged();} IssessionChanged();
}
} }
> >
<MenuItem value="0" style={{ "paddingLeft": "5px", "textAlign": "left","background":"orange" }}>Inactif &nbsp;&nbsp;</MenuItem> <MenuItem value="0" style={{ "paddingLeft": "5px", "textAlign": "left", "background": "orange" }}>Inactif &nbsp;&nbsp;</MenuItem>
<MenuItem value="1" style={{ "paddingLeft": "5px", "textAlign": "left", "background":"green" }}>Actif &nbsp;</MenuItem> <MenuItem value="1" style={{ "paddingLeft": "5px", "textAlign": "left", "background": "green" }}>Actif &nbsp;</MenuItem>
</TextField> </TextField>
</div>} </div>}
{!edit_session_form && <div className="session_caract">Statut a * <br />
<TextField
{!edit_session_form && <div className="session_caract">Statut* <br /> value={p_session_status_label}
className="disabled_style enable_style"
style={{"background":"yellow"}}
sx={{
backgroundColor: '#ffd60a',
border: '3px solid #001d3d',
}}
InputLabelProps={{
sx: {
color: '#003566',
textTransform: 'capitalize',
},
}}
disabled={false}
inputProps={{
sx: {
color: 'black',
paddingLeft: '15px',
fontSize: '20px',
},
}}
/>
</div>}
{!edit_session_form && <div className="session_caract">Statut a * <br />
<TextField <TextField
name="session_status" name="session_status"
id="session_status" id="session_status"
text
InputLabelProps={{ InputLabelProps={{
shrink: true, shrink: true,
}} }}
@ -3853,7 +3883,14 @@ const DisplayPartnerSession = (props) => {
disabled={false} disabled={false}
className="disabled_style enable_style" className="disabled_style enable_style"
value={p_session_status_label} value={p_session_status_label}
style={{
backgroundColor: "blue"
}}
InputProps={{
style: {
color: "red"
}
}}
/> />
@ -3872,7 +3909,8 @@ const DisplayPartnerSession = (props) => {
disabled={false} disabled={false}
className="disabled_style enable_style" className="disabled_style enable_style"
value={p_session_etape} value={p_session_etape}
onChange={(e) => {setp_session_etape(e.target.value); onChange={(e) => {
setp_session_etape(e.target.value);
IssessionChanged(); IssessionChanged();
}} }}
> >
@ -4002,8 +4040,10 @@ const DisplayPartnerSession = (props) => {
disabled={false} disabled={false}
className="disabled_style" className="disabled_style"
value={p_session_presentiel} value={p_session_presentiel}
onChange={(e) => {setp_session_presentiel(e.target.value); onChange={(e) => {
IssessionChanged();} setp_session_presentiel(e.target.value);
IssessionChanged();
}
} }
> >
<MenuItem value="1" style={{ "paddingLeft": "5px", "textAlign": "left" }}>Oui &nbsp;&nbsp;</MenuItem> <MenuItem value="1" style={{ "paddingLeft": "5px", "textAlign": "left" }}>Oui &nbsp;&nbsp;</MenuItem>
@ -4041,8 +4081,10 @@ const DisplayPartnerSession = (props) => {
disabled={false} disabled={false}
className="disabled_style" className="disabled_style"
value={p_session_distance} value={p_session_distance}
onChange={(e) => {setp_session_distance(e.target.value); onChange={(e) => {
IssessionChanged();} setp_session_distance(e.target.value);
IssessionChanged();
}
} }
> >
<MenuItem value="1" style={{ "paddingLeft": "5px", "textAlign": "left" }}>Oui &nbsp;&nbsp;</MenuItem> <MenuItem value="1" style={{ "paddingLeft": "5px", "textAlign": "left" }}>Oui &nbsp;&nbsp;</MenuItem>
@ -4166,8 +4208,10 @@ const DisplayPartnerSession = (props) => {
disabled={false} disabled={false}
className="disabled_style" className="disabled_style"
value={p_nb_participant} value={p_nb_participant}
onChange={(e) => {setp_nb_participant(e.target.value); onChange={(e) => {
IssessionChanged();} setp_nb_participant(e.target.value);
IssessionChanged();
}
} }
/> />
</div> </div>
@ -4185,8 +4229,10 @@ const DisplayPartnerSession = (props) => {
disabled={false} disabled={false}
className="disabled_style" className="disabled_style"
value={p_prix_session} value={p_prix_session}
onChange={(e) => {setp_prix_session(e.target.value); onChange={(e) => {
IssessionChanged();}} setp_prix_session(e.target.value);
IssessionChanged();
}}
/> />
</div> </div>
@ -4356,7 +4402,8 @@ const DisplayPartnerSession = (props) => {
disabled={false} disabled={false}
className="disabled_style enable_style" className="disabled_style enable_style"
value={p_one_session_ondemande} value={p_one_session_ondemande}
onChange={(e) => {setp_one_session_ondemande(e.target.value); onChange={(e) => {
setp_one_session_ondemande(e.target.value);
}} }}
> >
@ -4366,7 +4413,7 @@ const DisplayPartnerSession = (props) => {
</div> </div>
<div className="session_caract">Statut* <br /> <div className="session_caract">Statut b * <br />
<TextField <TextField
name="session_status" name="session_status"
id="session_status" id="session_status"
@ -4380,8 +4427,8 @@ const DisplayPartnerSession = (props) => {
value={p_one_session_status} value={p_one_session_status}
onChange={(e) => setp_one_session_status(e.target.value)} onChange={(e) => setp_one_session_status(e.target.value)}
> >
<MenuItem value="0" style={{ "paddingLeft": "5px", "textAlign": "left", "background":"orange" }}>Inactif &nbsp;&nbsp;</MenuItem> <MenuItem value="0" style={{ "paddingLeft": "5px", "textAlign": "left", "background": "orange" }}>Inactif &nbsp;&nbsp;</MenuItem>
<MenuItem value="1" style={{ "paddingLeft": "5px", "textAlign": "left" , "background":"green"}}>Actif &nbsp;</MenuItem> <MenuItem value="1" style={{ "paddingLeft": "5px", "textAlign": "left", "background": "green" }}>Actif &nbsp;</MenuItem>
</TextField> </TextField>
</div> </div>

View File

@ -15,7 +15,7 @@ import IconButton from '@mui/material/IconButton';
import { Fade } from 'react-slideshow-image'; import { Fade } from 'react-slideshow-image';
import { getCookie, setCookie } from 'react-use-cookie'; import { getCookie, setCookie } from 'react-use-cookie';
import Button from '@mui/material/Button'; import Button from '@mui/material/Button';
import { FcAddColumn, FcApproval } from "react-icons/fc";
import { FaHandPointRight } from "react-icons/fa"; import { FaHandPointRight } from "react-icons/fa";
import Header from "./Header"; import Header from "./Header";
@ -616,20 +616,37 @@ Cette fonction recuperer les stats des TOP 5 formations sur la periode saisie pa
const rowss = [ const rowss = [
{ id: 1, col1: 'Hello', col2: 'World' }, { id: 1, col1: 'Hello', col2: 'World', col3: '12', col4: true },
{ id: 2, col1: 'DataGridPro', col2: 'is Awesome' }, { id: 2, col1: 'DataGridPro', col2: 'is Awesome', col3: '12', col4: true },
{ id: 3, col1: 'MUI', col2: 'is Amazing' }, { id: 3, col1: 'MUI', col2: 'is Amazing', col3: '123', col4: false },
{ id: 4, col1: 'MUI2', col2: 'is Amazing2' }, { id: 4, col1: 'MUI2', col2: 'is Amazing2', col3: '02', col4: true },
{ id: 5, col1: 'DataGridPro 5', col2: 'is Awesome 5' }, { id: 5, col1: 'DataGridPro 5', col2: 'is Awesome 5', col3: '17', col4: false },
]; ];
const columnss = [ const columnss = [
{ field: 'col1', headerName: 'Column 1', width: 150 }, { field: 'col1', headerName: 'Column 1', width: 150 },
{ field: 'col2', headerName: 'Column 2', width: 150 }, { field: 'col2', headerName: 'Column 2', width: 150 },
{ field: 'col3', headerName: 'montant', width: 150 },
{ field: 'col4', headerName: 'statut', width: 150 },
]; ];
const columnsz = [
{ field: 'city' },
{ field: 'oct', type: 'number', valueFormatter: ({ value }) => `${value} °C` },
{ field: 'nov', type: 'number', valueFormatter: ({ value }) => `${value} °C` },
{ field: 'dec', type: 'number', valueFormatter: ({ value }) => `${value} °C` },
{ field: 'dec', type: 'number', valueFormatter: ({ value }) => `${value} °C` },
{ field: 'status', headerName: 'statut', width: 150, type: 'boolean', editable: true, },
{ field: 'stape', headerName: 'étape', width: 150, type: 'string', editable: true, },
];
const rowsz = [
{ id: 1, city: 'Amsterdam', oct: 7.1, nov: 4, dec: 10.2, status: false, stape: 'planifie' },
{ id: 2, city: 'Barcelona', oct: 14.9, nov: 12.3, dec: 18.2, status: true, stape: 'facturé' },
{ id: 3, city: 'Paris', oct: 8.1, nov: 5.4, dec: 12.3, status: false, stape: 'encours' },
{ id: 4, city: 'São Paulo', oct: 20.2, nov: 21.1, dec: 19.2, status: true, stape: 'planifie' },
];
const useStyles = makeStyles((theme) => const useStyles = makeStyles((theme) =>
({ ({
@ -653,7 +670,62 @@ Cette fonction recuperer les stats des TOP 5 formations sur la periode saisie pa
<div className="div_mobile"> <div className="div_mobile">
<div style={{ height: 500, width: "100%" }}> <Box
sx={{
height: 300,
width: '100%',
'& .cold': {
backgroundColor: '#b9d5ff91',
color: '#1a3e72',
},
'& .hot': {
backgroundColor: '#ff943975',
color: '#1a3e72',
},
'& .true': {
backgroundColor: '#2EFE2E',
color: '#1a3e72',
},
'& .planifie': {
backgroundColor: '#FA5882',
color: 'black',
},
'& .facturé': {
backgroundColor: 'black',
color: 'white',
},
}}
>
<DataGrid
rows={rowsz}
columns={columnsz}
getCellClassName={(params) => {
if (params.field === 'city' || params.value == null) {
return '';
}
if (params.field === 'status' && params.value == true) {
return 'true';
}
if (params.field === "stape" && String(params.value) === "planifie") {
return 'planifie'
}
if (params.field === "stape" && String(params.value) === "facturé") {
return 'facturé'
}
return params.value >= 15 ? 'hot' : 'cold';
}}
/>
</Box>
{/* <div style={{ height: 500, width: "100%" }}>
<DataGrid <DataGrid
//toolBar={<Toolbar sx={{ backgroundColor: "blue" }} />} //toolBar={<Toolbar sx={{ backgroundColor: "blue" }} />}
headerHeight={60} headerHeight={60}
@ -674,10 +746,23 @@ Cette fonction recuperer les stats des TOP 5 formations sur la periode saisie pa
How do you customize the DataGrid styling? How do you customize the DataGrid styling?
</a> </a>
</div> </div>
</div> </div>*/}
<div style={{ height: 500, width: '100%' }}> <div style={{ height: 500, width: '100%' }}>
<Box sx={{
height: 300,
width: '100%',
'& .cold': {
backgroundColor: '#b9d5ff91',
color: '#1a3e72',
},
'& .hot': {
backgroundColor: '#ff943975',
color: '#1a3e72',
},
}}>
<DataGrid <DataGrid
rows={rowss} rows={rowss}
columns={columnss} columns={columnss}
@ -685,6 +770,7 @@ Cette fonction recuperer les stats des TOP 5 formations sur la periode saisie pa
//checkboxSelection //checkboxSelection
sx={datagridSx} sx={datagridSx}
/> />
</Box>
</div> </div>
<div> <div>