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}
className="disabled_style enable_style"
value={p_session_ondemande}
onChange={(e) => {setp_session_ondemande(e.target.value);
IssessionChanged();}}
onChange={(e) => {
setp_session_ondemande(e.target.value);
IssessionChanged();
}}
>
<MenuItem value="1" style={{ "paddingLeft": "5px", "textAlign": "left" }}>Oui &nbsp;&nbsp;</MenuItem>
<MenuItem value="0" style={{ "paddingLeft": "5px", "textAlign": "left" }}>Non &nbsp;</MenuItem>
@ -3833,19 +3835,47 @@ const DisplayPartnerSession = (props) => {
value={p_session_status}
onChange={(e) => {
setp_session_status(e.target.value);
IssessionChanged();}
IssessionChanged();
}
}
>
<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="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>
</TextField>
</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
name="session_status"
id="session_status"
text
InputLabelProps={{
shrink: true,
}}
@ -3853,7 +3883,14 @@ const DisplayPartnerSession = (props) => {
disabled={false}
className="disabled_style enable_style"
value={p_session_status_label}
style={{
backgroundColor: "blue"
}}
InputProps={{
style: {
color: "red"
}
}}
/>
@ -3872,7 +3909,8 @@ const DisplayPartnerSession = (props) => {
disabled={false}
className="disabled_style enable_style"
value={p_session_etape}
onChange={(e) => {setp_session_etape(e.target.value);
onChange={(e) => {
setp_session_etape(e.target.value);
IssessionChanged();
}}
>
@ -4002,8 +4040,10 @@ const DisplayPartnerSession = (props) => {
disabled={false}
className="disabled_style"
value={p_session_presentiel}
onChange={(e) => {setp_session_presentiel(e.target.value);
IssessionChanged();}
onChange={(e) => {
setp_session_presentiel(e.target.value);
IssessionChanged();
}
}
>
<MenuItem value="1" style={{ "paddingLeft": "5px", "textAlign": "left" }}>Oui &nbsp;&nbsp;</MenuItem>
@ -4041,8 +4081,10 @@ const DisplayPartnerSession = (props) => {
disabled={false}
className="disabled_style"
value={p_session_distance}
onChange={(e) => {setp_session_distance(e.target.value);
IssessionChanged();}
onChange={(e) => {
setp_session_distance(e.target.value);
IssessionChanged();
}
}
>
<MenuItem value="1" style={{ "paddingLeft": "5px", "textAlign": "left" }}>Oui &nbsp;&nbsp;</MenuItem>
@ -4166,8 +4208,10 @@ const DisplayPartnerSession = (props) => {
disabled={false}
className="disabled_style"
value={p_nb_participant}
onChange={(e) => {setp_nb_participant(e.target.value);
IssessionChanged();}
onChange={(e) => {
setp_nb_participant(e.target.value);
IssessionChanged();
}
}
/>
</div>
@ -4185,8 +4229,10 @@ const DisplayPartnerSession = (props) => {
disabled={false}
className="disabled_style"
value={p_prix_session}
onChange={(e) => {setp_prix_session(e.target.value);
IssessionChanged();}}
onChange={(e) => {
setp_prix_session(e.target.value);
IssessionChanged();
}}
/>
</div>
@ -4356,8 +4402,9 @@ const DisplayPartnerSession = (props) => {
disabled={false}
className="disabled_style enable_style"
value={p_one_session_ondemande}
onChange={(e) => {setp_one_session_ondemande(e.target.value);
}}
onChange={(e) => {
setp_one_session_ondemande(e.target.value);
}}
>
<MenuItem value="1" style={{ "paddingLeft": "5px", "textAlign": "left" }}>Oui &nbsp;&nbsp;</MenuItem>
@ -4366,7 +4413,7 @@ const DisplayPartnerSession = (props) => {
</div>
<div className="session_caract">Statut* <br />
<div className="session_caract">Statut b * <br />
<TextField
name="session_status"
id="session_status"
@ -4380,8 +4427,8 @@ const DisplayPartnerSession = (props) => {
value={p_one_session_status}
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="1" style={{ "paddingLeft": "5px", "textAlign": "left" , "background":"green"}}>Actif &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>
</TextField>
</div>

View File

@ -15,7 +15,7 @@ import IconButton from '@mui/material/IconButton';
import { Fade } from 'react-slideshow-image';
import { getCookie, setCookie } from 'react-use-cookie';
import Button from '@mui/material/Button';
import { FcAddColumn, FcApproval } from "react-icons/fc";
import { FaHandPointRight } from "react-icons/fa";
import Header from "./Header";
@ -616,20 +616,37 @@ Cette fonction recuperer les stats des TOP 5 formations sur la periode saisie pa
const rowss = [
{ id: 1, col1: 'Hello', col2: 'World' },
{ id: 2, col1: 'DataGridPro', col2: 'is Awesome' },
{ id: 3, col1: 'MUI', col2: 'is Amazing' },
{ id: 4, col1: 'MUI2', col2: 'is Amazing2' },
{ id: 5, col1: 'DataGridPro 5', col2: 'is Awesome 5' },
{ id: 1, col1: 'Hello', col2: 'World', col3: '12', col4: true },
{ id: 2, col1: 'DataGridPro', col2: 'is Awesome', col3: '12', col4: true },
{ id: 3, col1: 'MUI', col2: 'is Amazing', col3: '123', col4: false },
{ id: 4, col1: 'MUI2', col2: 'is Amazing2', col3: '02', col4: true },
{ id: 5, col1: 'DataGridPro 5', col2: 'is Awesome 5', col3: '17', col4: false },
];
const columnss = [
{ field: 'col1', headerName: 'Column 1', 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) =>
({
@ -653,7 +670,62 @@ Cette fonction recuperer les stats des TOP 5 formations sur la periode saisie pa
<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
//toolBar={<Toolbar sx={{ backgroundColor: "blue" }} />}
headerHeight={60}
@ -674,17 +746,31 @@ Cette fonction recuperer les stats des TOP 5 formations sur la periode saisie pa
How do you customize the DataGrid styling?
</a>
</div>
</div>
</div>*/}
<div style={{ height: 500, width: '100%' }}>
<DataGrid
rows={rowss}
columns={columnss}
pageSizeOptions={[5, 10]}
//checkboxSelection
sx={datagridSx}
/>
<Box sx={{
height: 300,
width: '100%',
'& .cold': {
backgroundColor: '#b9d5ff91',
color: '#1a3e72',
},
'& .hot': {
backgroundColor: '#ff943975',
color: '#1a3e72',
},
}}>
<DataGrid
rows={rowss}
columns={columnss}
pageSizeOptions={[5, 10]}
//checkboxSelection
sx={datagridSx}
/>
</Box>
</div>
<div>