From 77a8c1d2bcf1dc150c38a48bf0d2aedddf09daec Mon Sep 17 00:00:00 2001 From: cherif Date: Mon, 11 Dec 2023 20:30:13 +0100 Subject: [PATCH] 11/12/2023 - 20h30 --- src/components/AddClassManual.js | 25 ++- src/components/AddPartnerClient.js | 142 +++++++++++++- src/components/Config_Champs_Personnalise.js | 2 +- src/components/Config_Document.js | 2 +- src/components/DisplayPartnerSession.js | 2 +- src/components/DisplayPartnerStagiaires.js | 176 +++++++++++++++--- .../DisplayPartnerTrainingsPagination.js | 24 +-- src/components/Employes.js | 2 +- src/components/Materiels.js | 2 +- src/components/Partner_Commande.js | 2 +- .../Partner_Config_Session_Steps.js | 2 +- src/components/Partner_Config_Technique.js | 5 +- src/components/Partner_Facture.js | 2 +- src/styles/components/_partner.scss | 48 +++-- 14 files changed, 368 insertions(+), 68 deletions(-) diff --git a/src/components/AddClassManual.js b/src/components/AddClassManual.js index 7a27c76..baf6ac7 100644 --- a/src/components/AddClassManual.js +++ b/src/components/AddClassManual.js @@ -494,11 +494,16 @@ const AddClassManual = (props) => { if (mylocaltraining.certif) { setmycertif(mylocaltraining.certif); - } else setmycertif("0"); + if (mylocaltraining.class_level) { + document.getElementsByName("class_level")[0].value = mylocaltraining.class_level; + } + else + document.getElementsByName("class_level")[0].value = "2"; + if (mylocaltraining.price) document.getElementsByName("price")[0].value = mylocaltraining.price; @@ -676,6 +681,7 @@ const AddClassManual = (props) => { var distentiel = document.getElementsByName("distentiel")[0].value; var domaine = document.getElementsByName("domaine")[0].value; var mypublier = document.getElementsByName("published")[0].value; + var niveau_ftion = document.getElementsByName("class_level")[0].value; var price = document.getElementsByName("price")[0].value; var duree = document.getElementsByName("duree")[0].value; var url = document.getElementsByName("url")[0].value; @@ -820,6 +826,7 @@ const AddClassManual = (props) => { formData.append('presentiel', presentiel); formData.append('domaine', domaine); formData.append('distantiel', distentiel); + formData.append('class_level', niveau_ftion); formData.append('price', price); formData.append('duration', duree); formData.append('duration_unit', mytrainingdurationunit); @@ -1612,6 +1619,20 @@ const AddClassManual = (props) => { +
+ +
+
{ {String(JSON.parse(champ_spec).field_type) === "float" && { const [p_client_email, setclient_email] = useState(""); const [p_client_nom, setclient_nom] = useState(""); + const [p_client_type_id, setp_client_type_id] = useState(""); + const [p_client_type_label, setp_client_type_label] = useState(""); + const [p_client_raison_sociale, setclient_raison_sociale] = useState(""); const [p_client_siret, setclient_siret] = useState(""); const [p_client_tva, setclient_tva] = useState(""); @@ -395,6 +398,45 @@ const AddParnerClient = (props) => { setcurrent_contact_recid(""); } + const [Get_List_Client_Type_api, setGet_List_Client_Type_api] = useState(); + const [Get_List_Client_Type_message, setGet_List_Client_Type_message] = useState(); + const [Get_List_Client_Type_result, setGet_List_Client_Type_result] = useState(); + function Get_List_Client_Type(event) { + + var form = new FormData(); + const stored_cookie = getCookie('tokenmysypart'); + const related_collection = "partner_client" + + + form.append("token", stored_cookie); + + var myurl = process.env.REACT_APP_API_URL + "myclass/api/Get_Client_Type_List/"; + + axios.post(myurl, form).then(res => { + console.log(" In Get_List_Client_Type res.data.status = " + res.data.status); + console.log(" In Get_List_Client_Type res.data.message r_class = " + res.data.message); + + if (String(res.data.status) === String("true")) { + setGet_List_Client_Type_api("true"); + setGet_List_Client_Type_result(res.data.message); + + } + else if (String(res.data.status) === String("Err_Connexion")) { + alert('Erreur: ' + res.data.message); + history.push("/Connexion"); + } + else { + setGet_List_Client_Type_api("false"); + setGet_List_Client_Type_message(res.data.message); + alert(res.data.message); + } + + }).catch((error) => { + console.warn('Not good man :( Get_List_Client_Type = ', error); + setGet_List_Client_Type_api("false"); + alert(" Impossible de récupérer les types de clients"); + }) + } useEffect(() => { @@ -410,6 +452,7 @@ const AddParnerClient = (props) => { setdatamodification_invoice("0"); Get_List_Contact_Of_client_Part(); + Get_List_Client_Type(); } else { @@ -425,9 +468,8 @@ const AddParnerClient = (props) => { const [fillfield_api, setfillfield_api] = useState(""); const [fillfield_result, setfillfield_result] = useState(""); const [fillfield_message, setfillfield_message] = useState(""); - function fillfield(cust_email) { + function fillfield() { - var val = cust_email; var form = new FormData(); @@ -447,7 +489,7 @@ const AddParnerClient = (props) => { if (mylocalclient) { - + if (mylocalclient.nom) { setclient_nom(mylocalclient.nom); @@ -462,7 +504,6 @@ const AddParnerClient = (props) => { } - if (mylocalclient.raison_sociale) { setclient_raison_sociale(mylocalclient.raison_sociale); } else { @@ -490,6 +531,16 @@ const AddParnerClient = (props) => { else setclient_siret(""); + + if (mylocalclient.client_type_id) { + + setp_client_type_id(mylocalclient.client_type_id); + setp_client_type_label(mylocalclient.client_type_code); + }else{ + setp_client_type_id(""); + setp_client_type_label(""); + } + if (mylocalclient.tva) setclient_tva(mylocalclient.tva); else @@ -836,6 +887,12 @@ const AddParnerClient = (props) => { document.getElementsByName("client_siret")[0].value = ""; } + if (document.getElementsByName("client_type_id")) { + document.getElementsByName("client_type_id")[0].value = ""; + } + + + if (document.getElementsByName("client_tva")) { document.getElementsByName("client_tva")[0].value = ""; } @@ -895,6 +952,11 @@ const AddParnerClient = (props) => { document.getElementsByName("client_siret")[0].style.backgroundColor = "#ECEFF1"; } + if (document.getElementsByName("client_type_id")) { + document.getElementsByName("client_type_id")[0].disabled = true; + document.getElementsByName("client_type_id")[0].style.backgroundColor = "#ECEFF1"; + } + if (document.getElementsByName("client_tva")) { document.getElementsByName("client_tva")[0].disabled = true; document.getElementsByName("client_tva")[0].style.backgroundColor = "#ECEFF1"; @@ -959,6 +1021,11 @@ const AddParnerClient = (props) => { document.getElementsByName("client_siret")[0].style.backgroundColor = "#FFFFFF"; } + if (document.getElementsByName("client_type_id")) { + document.getElementsByName("client_type_id")[0].disabled = false; + document.getElementsByName("client_type_id")[0].style.backgroundColor = "#FFFFFF"; + } + if (document.getElementsByName("client_tva")) { document.getElementsByName("client_tva")[0].disabled = false; document.getElementsByName("client_tva")[0].style.backgroundColor = "#FFFFFF"; @@ -1211,6 +1278,10 @@ const AddParnerClient = (props) => { } form.append("website", client_website); + if (p_client_type_id) + form.append("client_type_id", p_client_type_id); + else + form.append("client_type_id", ""); var myurl = process.env.REACT_APP_API_URL + "myclass/api/Add_Partner_Client/"; @@ -1326,6 +1397,13 @@ const AddParnerClient = (props) => { } form.append("siret", client_siret); + var client_type_client_id = "" + if (document.getElementsByName("client_type_id")) { + client_type_client_id = document.getElementsByName("client_type_id")[0].value; + } + form.append("client_type_id", client_type_client_id); + + var client_tva = "" if (document.getElementsByName("client_tva")) { client_tva = document.getElementsByName("client_tva")[0].value; @@ -1338,6 +1416,10 @@ const AddParnerClient = (props) => { } form.append("website", client_website); + if (p_client_type_id) + form.append("client_type_id", p_client_type_id); + else + form.append("client_type_id", ""); var myurl = process.env.REACT_APP_API_URL + "myclass/api/Update_Partner_Client/"; @@ -1349,6 +1431,7 @@ const AddParnerClient = (props) => { setrecordPartnerClient_result(res.data.message); setformedit_mode("0"); setdatamodification("0"); + fillfield(); Disable_fields(); alert(res.data.message); @@ -2288,6 +2371,53 @@ const AddParnerClient = (props) => { />
+ {String(formedit_mode) !== "1" &&
Type client
+ +
} + + + {String(formedit_mode) === "1" &&
Type client
+ { + setp_client_type_id(e.target.value); + + }} + > + + {Get_List_Client_Type_result && + Get_List_Client_Type_result.map((myclass) => ( + + {JSON.parse(myclass).code} + + + ))} + + +
} +
N° Siret
{ { value={p_contact_telephone} onChange={(e) => setcontact_telephone(e.target.value)} /> -
+
Téléphone Mobile
diff --git a/src/components/Config_Champs_Personnalise.js b/src/components/Config_Champs_Personnalise.js index 07e9e53..4746c51 100644 --- a/src/components/Config_Champs_Personnalise.js +++ b/src/components/Config_Champs_Personnalise.js @@ -1246,7 +1246,7 @@ const Config_Champs_Personnalise = (props) => {
-
+
  {
-
+
 
-
+
  { { field: 'id', headerName: 'id', hide: true }, { field: 'class_internal_url', headerName: 'class_internal_url', hide: true, editable: false }, - - { field: 'nom', headerName: 'Nom', minWidth: 150, flex:1, hide: false, editable: false, editable: false }, - { field: 'prenom', headerName: 'Prénom', minWidth: 150, flex:1, hide: false, editable: false }, - { field: 'email', headerName: 'Email', minWidth: 200, flex:1,hideable: false, editable: false }, + + { field: 'nom', headerName: 'Nom', minWidth: 150, flex: 1, hide: false, editable: false, editable: false }, + { field: 'prenom', headerName: 'Prénom', minWidth: 150, flex: 1, hide: false, editable: false }, + { field: 'email', headerName: 'Email', minWidth: 200, flex: 1, hideable: false, editable: false }, { field: 'employeur', headerName: 'Employeur', minWidth: 150, hide: true, editable: false }, { field: 'status', headerName: 'Statut', hide: false, width: datagrid_columns_size_model2, @@ -105,8 +105,8 @@ const DisplayPartnerStagiaires = (props) => { return "???"; }, }, - { field: 'code_session', headerName: 'Code session', hideable: true, editable: false, minWidth: 150, flex:1}, - { field: 'title', headerName: 'Formation', minWidth: datagrid_columns_size_model1, align: "center", hideable: true, editable: false, hide:true }, + { field: 'code_session', headerName: 'Code session', hideable: true, editable: false, minWidth: 150, flex: 1 }, + { field: 'title', headerName: 'Formation', minWidth: datagrid_columns_size_model1, align: "center", hideable: true, editable: false, hide: true }, { field: 'distantiel', headerName: 'Distantiel', hideable: false, width: datagrid_columns_size_model2, valueFormatter: (params) => { @@ -131,8 +131,8 @@ const DisplayPartnerStagiaires = (props) => { }, { field: 'domaine', headerName: 'Domaine', minWidth: datagrid_columns_size_model2, align: "center", hide: true, hideable: true, editable: false }, - { field: 'date_debut', headerName: 'Du', minWidth: 90, maxWidth:100, flex:1, hideable: true, editable: false }, - { field: 'date_fin', headerName: 'Au', minWidth: 90, maxWidth:100, flex:1, hideable: true, editable: false }, + { field: 'date_debut', headerName: 'Du', minWidth: 90, maxWidth: 100, flex: 1, hideable: true, editable: false }, + { field: 'date_fin', headerName: 'Au', minWidth: 90, maxWidth: 100, flex: 1, hideable: true, editable: false }, { field: 'class_internal_url', headerName: 'class_internal_url', hide: true, editable: false }, { field: "Detail", headerName: 'Voir detail', @@ -154,7 +154,7 @@ const DisplayPartnerStagiaires = (props) => { } }, { - field: 'Action', headerName: 'Action', hide: false, minWidth: 100, maxWidth:150, flex:1, + field: 'Action', headerName: 'Action', hide: false, minWidth: 100, maxWidth: 150, flex: 1, renderCell: (cellValues) => { return ( @@ -856,10 +856,11 @@ const DisplayPartnerStagiaires = (props) => { const [addOneSession, setaddOneSession] = useState(); function submenu_add_one_stagiaire() { + setsubmenu(""); setSelectionModel([]); setselected_code_session(); setaddOneParticipant("1"); - submenu_detail_stagaire(); + if (document.getElementById('detail_session')) { // myRef.current.scrollIntoView({ behavior: "smooth" }); @@ -1031,6 +1032,9 @@ const DisplayPartnerStagiaires = (props) => { setp_detail_client_rattachement_nom(); setp_detail_client_rattachement_id(); + setp_detail_type_apprenant(); + setp_detail_type_apprenant_label(); + setfield_evaluation(); setdetailuser_date_certification(); setdetailuser_date_evaluation(); @@ -1069,6 +1073,9 @@ const DisplayPartnerStagiaires = (props) => { if (document.getElementsByName("one_pays_part") && document.getElementsByName("one_pays_part")[0]) document.getElementsByName("one_pays_part")[0].value = ""; + if (document.getElementsByName("one_detail_type_apprenant") && document.getElementsByName("one_pays_part")[0]) + document.getElementsByName("one_detail_type_apprenant")[0].value = ""; + if (document.getElementsByName("one_status_part") && document.getElementsByName("one_status_part")[0]) document.getElementsByName("one_status_part")[0].value = ""; @@ -1089,6 +1096,8 @@ const DisplayPartnerStagiaires = (props) => { setp_one_status_part(""); setp_one_detail_client_rattachement_nom(""); setp_one_detail_client_rattachement_id(""); + + setp_one_detail_type_apprenant(""); } @@ -1385,6 +1394,12 @@ const DisplayPartnerStagiaires = (props) => { document.getElementsByName("detail_opco")[0].style.backgroundColor = "#ECEFF1"; } + if (document.getElementsByName("detail_type_apprenant")[0]) { + document.getElementsByName("detail_type_apprenant")[0].disabled = true; + document.getElementsByName("detail_type_apprenant")[0].style.backgroundColor = "#ECEFF1"; + } + + if (document.getElementsByName("detail_prenom")[0]) { document.getElementsByName("detail_prenom")[0].disabled = true; document.getElementsByName("detail_prenom")[0].style.backgroundColor = "#ECEFF1"; @@ -1595,7 +1610,8 @@ const DisplayPartnerStagiaires = (props) => { document.getElementsByName("note_eval")[0].disabled = false; document.getElementsByName("note_eval")[0].style.backgroundColor = "#FFFFFF"; - + document.getElementsByName("detail_type_apprenant")[0].disabled = false; + document.getElementsByName("detail_type_apprenant")[0].style.backgroundColor = "#FFFFFF"; document.getElementsByName("date_evaluation")[0].disabled = false; @@ -1928,7 +1944,7 @@ const DisplayPartnerStagiaires = (props) => { await sleep(5); setdisplay_detail_stagiaire("1"); - addOneParticipant(); + setaddOneParticipant(); /*if (!edit_session_form) { desableSessionFields(); @@ -2053,6 +2069,11 @@ const DisplayPartnerStagiaires = (props) => { const [p_detail_cout, setp_detail_cout] = useState(); const [p_detail_mode_fin, setp_detail_mode_fin] = useState(); const [p_detail_employeur, setp_detail_employeur] = useState(); + + const [p_detail_type_apprenant, setp_detail_type_apprenant] = useState(); + const [p_detail_type_apprenant_label, setp_detail_type_apprenant_label] = useState(); + + const [p_date_evaluation, setp_date_evaluation] = useState(); const [p_note_eval, setp_note_eval] = useState(); const [p_detail_session_class, setp_detail_session_class] = useState(); @@ -2097,6 +2118,8 @@ const DisplayPartnerStagiaires = (props) => { const [p_one_code_postal_part, setp_one_code_postal_part] = useState(); const [p_one_pays_part, setp_one_pays_part] = useState(); const [p_one_status_part, setp_one_status_part] = useState(); + const [p_one_detail_type_apprenant, setp_one_detail_type_apprenant] = useState(); + const [p_one_detail_client_rattachement_nom, setp_one_detail_client_rattachement_nom] = useState(); const [p_one_detail_client_rattachement_id, setp_one_detail_client_rattachement_id] = useState(); @@ -2189,6 +2212,26 @@ const DisplayPartnerStagiaires = (props) => { setp_detail_status_inscrit_label("?"); } + + if (mylocalattendee.type_apprenant) { + setp_detail_type_apprenant(mylocalattendee.type_apprenant); + // console.log(" ### mylocalattendee.type_apprenant = ", mylocalattendee.type_apprenant); + + if (String(mylocalattendee.type_apprenant) === "0") + setp_detail_type_apprenant_label("Autre"); + else if (String(mylocalattendee.type_apprenant) === "1") + setp_detail_type_apprenant_label("Salariés"); + else if (String(mylocalattendee.type_apprenant) === "2") + setp_detail_type_apprenant_label("Apprentis"); + else if (String(mylocalattendee.type_apprenant) === "3") + setp_detail_type_apprenant_label("Particuliers"); + else if (String(mylocalattendee.type_apprenant) === "4") + setp_detail_type_apprenant_label("Rech. Emploi"); + else + setp_detail_type_apprenant_label("?"); + } + + document.getElementsByName("detail_opco")[0].value = ""; if (mylocalattendee.opco) setp_detail_opco(mylocalattendee.opco); @@ -2612,6 +2655,11 @@ const DisplayPartnerStagiaires = (props) => { else form.append("pays", ""); + if (p_one_detail_type_apprenant) + form.append("type_apprenant", p_one_detail_type_apprenant); + else + form.append("type_apprenant", "0"); + if (p_one_status_part) form.append("status", p_one_status_part); @@ -2671,6 +2719,7 @@ const DisplayPartnerStagiaires = (props) => { setaddOneParticipant(); Getall_TrainingParticipant(); clear_one_Attende_Fields(); + setselected_id(""); alert(" Le participant a été correctement ajouté"); //myRef_head.current.scrollIntoView({ behavior: "smooth" }); @@ -2780,6 +2829,12 @@ const DisplayPartnerStagiaires = (props) => { else form.append("opco", ""); + if (p_detail_type_apprenant) + form.append("type_apprenant", p_detail_type_apprenant); + else + form.append("type_apprenant", "0"); + + form.append("_id", selected_id); if (p_detail_client_rattachement_nom) form.append("client_rattachement_id", p_detail_client_rattachement_id); @@ -3351,6 +3406,7 @@ const DisplayPartnerStagiaires = (props) => { } + if (document.getElementsByName("adresse")[0]) { document.getElementsByName("adresse")[0].disabled = true; document.getElementsByName("adresse")[0].style.backgroundColor = "#ECEFF1"; @@ -5566,7 +5622,7 @@ const DisplayPartnerStagiaires = (props) => {
-
+
  { color: "black", fontSize: 14 }, - + '& .line--statut--selected': { backgroundColor: '#FBF2EF', color: 'black', @@ -5718,14 +5774,14 @@ const DisplayPartnerStagiaires = (props) => { return 'line--statut--inscrit'; } - // Pour la gestion de la couleur de zone double cliquée - if (String(params.row.id) === String(gridline_id)) { + // Pour la gestion de la couleur de zone double cliquée + if (String(params.row.id) === String(gridline_id)) { return 'line--statut--selected'; } - else if( parseInt(String(params.row.id)) % 2 === 0){ + else if (parseInt(String(params.row.id)) % 2 === 0) { return 'line--statut--pair'; } - else if( parseInt(String(params.row.id)) % 2 !== 0){ + else if (parseInt(String(params.row.id)) % 2 !== 0) { return 'line--statut--impair'; } }} @@ -5852,13 +5908,14 @@ const DisplayPartnerStagiaires = (props) => {
 
-
+ + {( (selected_id && String(selected_id).length > 2) || (String(addOneParticipant) === "1" ) ) &&
-
+
} @@ -6159,6 +6216,34 @@ const DisplayPartnerStagiaires = (props) => {
+
Type apprenant
+ { + setp_one_detail_type_apprenant(e.target.value); + } + } + + > + Autre   + Salariés   + Apprentis   + Particuliers   + Rech. Emploi   + + +
+ {/* -- debut champs specifiques **/}

@@ -6354,7 +6439,7 @@ const DisplayPartnerStagiaires = (props) => {
} - {String(participant_data_edit_mode) === "1" &&
Session bb
+ {String(participant_data_edit_mode) === "1" &&
Session
{
} + + {String(participant_data_edit_mode) === "1" &&
Type apprenant
+ { + //setp_detail_client_rattachement_id(e.target.value); + setp_detail_type_apprenant(e.target.value); + setparticipant_data_changed("1"); + + } + } + + > + Autre   + Salariés   + Apprentis   + Particuliers   + Rech. Emploi   + + +
} + + {String(participant_data_edit_mode) !== "1" &&
Type apprenant
+ + +
} + {String(participant_data_edit_mode) !== "1" &&
Statut
{ { field: 'lms_class_code', headerName: 'lms_class_code', hide: true }, { field: 'zone_diffusion', headerName: 'zone_diffusion', hide: true }, { field: 'internal_url', headerName: 'internal_url', hide: true }, - { field: 'external_code', headerName: 'Code Formation', hideable: false, minWidth: 100, flex: 1, maxWidth: 250, editable: false }, - { field: 'title', headerName: 'Titre', flex: 1, hideable: false, minWidth: 250, flex: 1, editable: false }, - { field: 'domain', headerName: 'Domaine', minWidth: datagrid_columns_size_model1, hideable: true, }, - { field: 'metier', headerName: 'Métier', minWidth: datagrid_columns_size_model1, hideable: true, hide: true }, - { field: 'url', headerName: 'lien', minWidth: datagrid_columns_size_model1, hideable: true, hide: true }, + { field: 'external_code', headerName: 'Code Formation', hideable: false, minWidth: 150, flex: 1, maxWidth: 250, editable: false }, + { field: 'title', headerName: 'Titre', flex: 1, hideable: false, minWidth: 320, flex: 1, editable: false }, + { field: 'domain', headerName: 'Domaine', minWidth: 50, flex:1, maxWidth:150, hideable: true, }, + { field: 'metier', headerName: 'Métier', minWidth: 50, flex:1, maxWidth:150, hideable: true, hide: true }, + { field: 'url', headerName: 'lien', minWidth: 20, hideable: true, hide: true }, { field: 'description', headerName: 'Description', hide: true, resizable: true, minWidth: 100, maxWidth: 150, flex: 1 }, - { field: 'price', headerName: 'Prix', minWidth: datagrid_columns_size_model2, align: "center", resizable: true, hide: ismobilephone_columns_hide }, + { field: 'price', headerName: 'Prix', minWidth: 50, flex:1, maxWidth:100, align: "center", resizable: true, hide: ismobilephone_columns_hide }, { - field: 'published', headerName: 'Publié', minWidth: datagrid_columns_size_model2, align: "center", resizable: true, + field: 'published', headerName: 'Publié', minWidth: 50, flex:1, maxWidth:100, align: "center", resizable: true, valueFormatter: (params) => { if (String(params.value) === "0") return "Non"; @@ -256,7 +256,7 @@ const DistplayPartnerTraningsPage = (props) => { }, }, { - field: "management", headerName: 'Gestion', width: datagrid_columns_size_model2, + field: "management", headerName: 'Gestion', minWidth: 50, flex:1, maxWidth:100, renderCell: (cellValues) => { return ( @@ -274,7 +274,7 @@ const DistplayPartnerTraningsPage = (props) => { } }, { - field: "visual", headerName: 'Visualiser', width: datagrid_columns_size_model2, + field: "visual", headerName: 'Visualiser', minWidth: 50, flex:1, maxWidth:100, renderCell: (cellValues) => { return ( @@ -292,7 +292,7 @@ const DistplayPartnerTraningsPage = (props) => { } }, { - field: "Print", headerName: 'Editer', width: datagrid_columns_size_model2, + field: "Print", headerName: 'Editer', minWidth: 50, flex:1, maxWidth:100, renderCell: (cellValues) => { return ( @@ -311,7 +311,7 @@ const DistplayPartnerTraningsPage = (props) => { }, { - field: "push_to_lms", headerName: 'E-learning Creation', width: 150, + field: "push_to_lms", headerName: 'E-learning Creation', minWidth: 100, flex:1, maxWidth:150, renderCell: (cellValues) => { return (