Codis quasi operatius

PROBLEMES.MD

@@ -0,0 +1 @@
+ - Al crear codis encara se poden crear (i posteriorment assignarien) codis amb Àmbits i Rols incoherents.

imports/ui/Codis.jsx

@@ -1,4 +1,4 @@
-import React, { Suspense, useEffect, useState, useRef, lazy } from 'react';
+import React, { Suspense, useEffect, useState } from 'react';
 import { Meteor } from 'meteor/meteor';
 import { Random } from 'meteor/random';
 import { NecessitatsCollection } from '/imports/api/necessitats.js';
@@ -10,15 +10,15 @@ import { Roles } from 'meteor/roles';
 // import { useUserId } from 'meteor/react-meteor-accounts';
 import Select from 'react-select';
 
-import CreatableSelect from 'react-select/creatable';
+// import CreatableSelect from 'react-select/creatable';
 // import AsyncCreatableSelect from 'react-select/async-creatable';
 // import { BarraNav } from "./BarraNav/BarraNav";
 
 // import InfiniteCalendar from 'react-infinite-calendar';
 // import 'react-infinite-calendar/styles.css';
 
-function generaCodi() {0
+function generaCodi() {
-     return Random.id().slice(0, 5);
+     return Random.id().slice(0, 5).toUpperCase();
 }
 
 export const Codis = () => {
@@ -38,10 +38,20 @@ export const Codis = () => {
 
      // console.log("isAdmin: ", isAdmin) ;
      
-     const [ambitSeleccionat, setAmbitSeleccionat] = useState(null);
+     // const [ambitSeleccionat, setAmbitSeleccionat] = useState(null);
 
-     useSubscribe('necessitats');
+     const [confecCodObj, setConfecCodObj] = useState({
-     const necessitats = useTracker("necessitats", () => NecessitatsCollection.find().fetchAsync());
+          codi: generaCodi(),
+          ambit: null,
+          rol: null,
+          absCond: "abs",
+          absActiu: false,
+          condIni: null,
+          condFi: null
+     });
+
+     // useSubscribe('necessitats');
+     // const necessitats = useTracker("necessitats", () => NecessitatsCollection.find().fetchAsync());
 
      useSubscribe('codis');
      const codis = useTracker("codis", () => CodisCollection.find().fetchAsync());
@@ -67,9 +77,12 @@ export const Codis = () => {
      //      );
      // };
      // const [ambitGeneral, setAmbitGeneral] = useState(ambitSeleccionat === "GENERAL");
-     const codiDoc = useTracker("codiDoc", () => CodisCollection.findOneAsync(codiSeleccionat?._id));
+     const codiDoc = useTracker("valsFormDoc", () => CodisCollection.findOneAsync(codiSeleccionat?._id));
+
+     // let selRolVal = codiDoc?.rol || "usuari";
 
      const SelectorDeRol = () => {
+          // const [docRol, setDocRol] = useState(codiDoc?.rol)
 
           return <>
                <label htmlFor="selRol">Rol: </label>
@@ -78,9 +91,38 @@ export const Codis = () => {
                     key={Math.random()}
                     name="selRol"
                     // filterOption={(opts) => necessitats.find(nec => nec.tipus === tipusSeleccionat._id)}
+                    defaultValue={
+                         codiSeleccionat
+                         ? {
+                              label: codiSeleccionat?.rol,
+                              value: codiSeleccionat?.rol
+                         }
+
+                         : confecCodObj?.rol || null
+                              // ? {
+                              //      label: confecCodObj.rol,
+                              //      value: confecCodObj.rol
+                              // }
+
+                              // : null
+                         // docRol && {label: docRol, value: docRol}
+                    }
+
+                    onChange={v => {
+                         console.log("v: ", v);
+
+                         console.log("cCO abans: ", confecCodObj);
+                         // setDocRol(v);
+                         setConfecCodObj({
+                              ...confecCodObj,
+                              rol: v
+                         });
+
+                         console.log("cCO despres: ", confecCodObj);
+                    }}
                     
                     options={
-                         (ambitSeleccionat?.value === "GENERAL")
+                         (confecCodObj?.ambit?.value === "GENERAL")
                          ? [
                               {
                                    value: "admin",
@@ -114,9 +156,14 @@ export const Codis = () => {
      const QuadreInfo_Codis = () => {
 
           const [actCond, setActCond] = useState(true);
-          const [codiGenerat, setCodiGenerat] = useState(generaCodi()?.toUpperCase());
+          const [codiGenerat, setCodiGenerat] = useState(generaCodi());
 
+          const [absCond, setAbsCond] = useState('cond');
 
+          const codSelAbsActChecked = codiDoc ? {checked: codiDoc.absActiu} : {defaultChecked: confecCodObj.absActiu};
+
+          console.log("cS: ", codiSeleccionat);
+          console.log("cCO: ", confecCodObj);
           
           return <div style={{
                display: `inline-block`,
@@ -127,7 +174,7 @@ export const Codis = () => {
                outline: `${codiSeleccionat?._id ? '5px solid black' : 'none'}`
           }}>
           
-          {ambitSeleccionat && <h1>{ambitSeleccionat?.value}</h1>}
+          {/* {ambitSeleccionat && <h1>{ambitSeleccionat?.value}</h1>} */}
           <h1>Codis</h1>
 
           {/* <button
@@ -153,13 +200,12 @@ export const Codis = () => {
                               padding: `0 .2em`,
                               margin: `1rem auto`,
                          }}
-                    >{codiSeleccionat ? codiSeleccionat?.codi : codiGenerat}</span>
+                    >{codiSeleccionat ? codiSeleccionat?.codi : confecCodObj.codi}</span>
                </div>
                <br />
 
           <p>Tria el rol que adquirirà qui utilitze el codi anterior una vegada activat</p>
 
-
           <form
                action={d => {
                     // if (d.get('selTipus'))
@@ -169,10 +215,15 @@ export const Codis = () => {
                               codi: codiGenerat,
                               ambit: d.get('selAmbit') || "",
                               rol: d.get('selRol'),
-                              act_abs: d.get('activ_abs'),
+                              
-                              act_cond: d.get('activ_cond'),
+                              // act_abs: d.get('activAbs'),
-                              periode_validesa_ini: d.get('periode_validesa_ini'),
+                              absCond,
-                              periode_validesa_fi: d.get('periode_validesa_fi')
+                              absActiu: d.get('absActiu'),
+                              condIni: d.get('condIni'),
+                              condFi: d.get('condFi')
+                              
+                              
+                    
                          })
                               .then(() => setAmbitSeleccionat(null))
                               .catch(err => console.error(err))
@@ -195,7 +246,10 @@ export const Codis = () => {
                     name="selAmbit"
                     // formatCreateLabel={(inputValue) => "Crear nou tipus..."}
                     // filterOption={filterAmbit}
-                    defaultValue={ambitSeleccionat}
+                    defaultValue={codiDoc && {
+                         label: codiDoc?.ambit,
+                         value: codiDoc?.ambit
+                    } || confecCodObj.ambit}
                     options={
                          [...
                               ambits
@@ -214,8 +268,13 @@ export const Codis = () => {
                     isSearchable
                     // loadOptions={tipus.map((v,i) => ({value: v, label: v.titol}))}
                     onChange={amb => {
-                         setAmbitSeleccionat(amb);
+                         // setAmbitSeleccionat(amb);
-                         console.log("amb: ", amb);
+                         // console.log("amb: ", amb);
+
+                         setConfecCodObj({
+                              ...confecCodObj,
+                              ambit: amb
+                         });
 
                     }}
                />
@@ -230,11 +289,12 @@ export const Codis = () => {
 
                <br />
 
-               <SelectorDeRol {... {ambitSeleccionat}} />
+               <SelectorDeRol />
+               {/* {... {ambitSeleccionat, selRolVal}} /> */}
 
                <br /><br />
 
-               <label htmlFor="periode_validesa">Periode de validesa: </label>
+               <p>Periode de validesa: </p>
                
                <div style={{
                     border: `1px solid #cccc`,
@@ -243,43 +303,155 @@ export const Codis = () => {
                     padding: `.6rem`,
                     backgroundColor: `lightslategray`
                }}>
-                    <p>TEMPS REAL:</p>
+                    {/* <p>TEMPS REAL:</p> */}
-                    <label htmlFor="activ_abs"
-                         style={{
-                              color: `red`
-                         }}
-                    >Activació absoluta: </label>
                     <input
-                         type="checkbox"
+                         type="radio"
-                         name='activ_abs'
+                         name='absCond'
-                         defaultChecked={codiDoc?.act_abs === "on"}
+                         value="abs"
-                         onChange={ev => {
+                         // defaultChecked={codiDoc?.act_abs === "on"}
-                              ev.preventDefault();
+                         // checked={absCond === 'abs'}
-                              ev.stopPropagation();
+                         // onChange={(ev) => setAbsCond('abs')}
-
-                              Meteor.callAsync('modActivacioAbsolutaCodi', codiDoc);
-                         }}
 
+                         checked={codiSeleccionat && codiSeleccionat.absCond === 'abs' || confecCodObj?.absCond === 'abs'}
+                         onChange={(ev) => setConfecCodObj({
+                              ...confecCodObj,
+                              absCond: 'abs'
+                         })}
                     />
+                    <label
+                         htmlFor="absCond"
+                    
+                         onClick={() => setConfecCodObj({
+                         ...confecCodObj,
+                         absCond: 'abs'
+                    })}>Activació absoluta</label>
                     
                     <br />
 
                     {/* L'activació condicionada desactivada fa que no siguen 'required' les dates d'inici i final */}
 
-                    <label htmlFor="activa_cond">Activació condicionada: </label>
+                    <input
-                    <input type="checkbox" name='activ_cond' checked={actCond} 
+                         type="radio"
-                         onChange={(ev) => setActCond(!actCond)}
+                         name='absCond'
-                    />
+                         value="cond"
-                    <p
+                         
-                         style={{
+                         // checked={absCond === 'cond'}
-                              color: `red`
+                         // onChange={(ev) => setAbsCond('cond')}
-                         }}
+                         checked={codiSeleccionat && codiSeleccionat.absCond === 'cond' || confecCodObj?.absCond === 'cond'}
-                    >ATENCIÓ al format! <b>(mm/dd/aaaa)</b></p>
+                         onChange={(ev) => setConfecCodObj({
+                              ...confecCodObj,
+                              absCond: 'cond'
+                         })}
+
+                    />
+                    <label htmlFor="absCond" onClick={
+                         () => setConfecCodObj({
+                              ...confecCodObj,
+                              absCond: 'cond'
+                         })
+                    }>Activació condicionada</label>
 
-                    Des de: <input required={actCond} type="date" name="periode_validesa_ini" />
                     <br />
-                    Fins a: <input required={actCond} type="date" name="periode_validesa_fi" />
                     <br />
+
+                    <div style={{
+                         border: `1px solid #6666`,
+                         padding: `0 1rem`,
+                         borderRadius: `.5em`,
+                         backgroundColor: `#fff2`
+                    }}>
+                    {
+                         (codiSeleccionat
+                         &&
+                         codiSeleccionat?.absCond === 'abs'
+                         
+                         ||
+
+                         confecCodObj?.absCond === 'abs'
+                         )
+                         &&
+
+                         <>
+                              <label htmlFor="act_status">Actiu</label>
+                              <input
+                                   type="checkbox"
+                                   name="absActiu"
+                                   id="absActiu"
+                                   {...codSelAbsActChecked}
+                                   onChange={ev => {
+                                        ev.preventDefault();
+                                        ev.stopPropagation();
+
+                                        // console.log("ev: ", ev);
+
+                                        if (codiSeleccionat) {
+                                             Meteor.callAsync('modActivacioAbsolutaCodi', codiSeleccionat);
+                                             setCodiSeleccionat({
+                                                  ...codiSeleccionat,
+                                                  absActiu: !codiSeleccionat.absActiu
+                                             });
+                                        }
+
+                                        setConfecCodObj({
+                                             ...confecCodObj,
+                                             absActiu: !confecCodObj.absActiu
+                                        });
+                                        
+                                   }}
+                              />
+                         </>
+                         // codiDoc &&
+                         // Meteor.callAsync('modActivacioAbsolutaCodi', codiDoc);
+                    }
+                    {
+                         codiSeleccionat
+                         &&
+                         codiSeleccionat.absCond === 'cond'
+                         
+                         ||
+
+                         confecCodObj?.absCond === 'cond'
+                         &&
+                         <>
+                              <p
+                                   style={{
+                                        color: `red`
+                                   }}
+                              >ATENCIÓ al format! <b>(mm/dd/aaaa)</b></p>
+
+                              Des de: <input
+                                   required={confecCodObj.actCond === 'cond'}
+                                   type="date"
+                                   name="condIni"
+                                   onChange={v => {
+
+                                        console.log("dataIni: ", v.currentTarget.value);
+                                        setConfecCodObj({
+                                             ...confecCodObj,
+                                             condIni: v.currentTarget.value
+                                        })
+                                   }}
+                                   defaultValue={confecCodObj.condIni}
+                              />
+                              <br />
+                              Fins a: <input
+                                   required={confecCodObj.
+                                   actCond === 'cond'}
+                                   type="date"
+                                   name="condFi"
+                                   onChange={v => {
+                                        console.log("dataFi: ", v.currentTarget.value);
+                                        setConfecCodObj({
+                                             ...confecCodObj,
+                                             condFi: v.currentTarget.value
+                                        })
+                                   }}
+                                   defaultValue={confecCodObj.condFi}
+                              />
+                              <br />
+                         </>
+                    }
+                    </div>
                </div>
           
                {/* <select name="s.
@@ -354,6 +526,7 @@ export const Codis = () => {
                          ev.preventDefault();
                          ev.stopPropagation();
 
+                         // console.log("codSel: ", codiSeleccionat);
                          setCodiSeleccionat(codiSeleccionat?._id === cod._id ? null : cod);
                     }}
                >
@@ -366,8 +539,8 @@ export const Codis = () => {
                               height: `5px`,
                               right: `2px`,
                               top: `2px`,
-                              boxShadow: `0 0 14px 5px ${cod.act_abs === "on" ? "lime" : "red"}`,
+                              boxShadow: `0 0 14px 5px ${cod.absActiu ? "lime" : "red"}`,
-                              backgroundColor: `${cod.act_abs === "on" ? "lime" : "red"}`
+                              backgroundColor: `${cod.absActiu ? "lime" : "red"}`
                          }}
                          onClick={ev => {
                               ev.preventDefault();

server/main.js

@@ -523,7 +523,7 @@ Meteor.methods({
         { _id: cod._id },
         { $set: {
           ...cod,
-          'act_abs': cod.act_abs === "on" ? null : "on"
+          absActiu: !cod.absActiu
         }}
       )
     }