Unmessing. Abans de provar les solucions de kapa ai

imports/ui/Usuaris.jsx

@@ -36,7 +36,7 @@ import { useNavigate, Link } from 'react-router-dom';
 //   </span>;
 // };
 
-const U = ({u, esAdministrador}) => {
+const U = ({u, esAdministrador, setUsrSeleccionat}) => {
 
      const [adm, setAdm] = useState(false);
      const [mon, setMon] = useState(false);
@@ -99,6 +99,7 @@ const U = ({u, esAdministrador}) => {
   
   return <Suspense fallback="Carregant...">
     <div
+     key={`u_${u._id}`}
       style={{
         // color: `lightblue`,
         
@@ -190,9 +191,10 @@ const U = ({u, esAdministrador}) => {
           ev.preventDefault();
           ev.stopPropagation();
 
-          alert("Click en missatges");
+          // alert("Click en missatges");
         }}
       >
+          {<button onClick={() => {setUsrSeleccionat(u)}}>Edita</button>}
         {/* <IndicadorMissatges notif={false} /> */}
       </span>
     </div>
@@ -245,6 +247,193 @@ const U = ({u, esAdministrador}) => {
 };
 
 
+
+const AssignadorDeRols = ({pobles, ambitGeneral, esEditor, rols, usrSeleccionat, ambitsUSel}) => {
+     const [creantRol, setCreantRol] = useState(false);
+     // const [ambitsUSel, setAmbitsUSel] = useState([]);
+     // let ambitsUSel;
+     // let ambitsUSel = [];
+     // useEffect(() => {
+     // (async () => {
+     //      const ambits = await Roles.getScopesForUserAsync(usrSeleccionat?._id);
+     //      // console.log("ambitsUSel: ", ambitsUSel);
+     //      // ambitsUSel = ambits;
+     //      // setAmbitsUSel(ambits);
+     //      ambitsUSel = ambits;
+     //      // console.log("ambitsUSel: ", ambitsUSel);
+     // })();
+     // }, []);
+
+     return <div
+          style={{
+               display: `block`,
+               border: `1px solid #6666`,
+               padding: `.5rem`,
+               borderRadius: `.3em`,
+               margin: `1em`,
+               backgroundColor: `#fffa`
+          }}
+     >
+          <h3>Rols</h3>
+
+          <h4>Àmbits</h4>
+          <h5>General:</h5>
+          <ul>{
+               rols?.map(uRol => <li
+                    key={`rol_${uRol}`}
+                    style={{
+                         display: `block`,
+                         border: `1px solid #6666`,
+                         borderRadius: `.4em`,
+                         padding: `4px`,
+                         listStyle: `none`,
+                         backgroundColor: `${'orange'}`,
+                         textAlign: `center`
+                    }}
+               >
+                    {uRol}
+                    {esEditor && <button onClick={ev => {
+                         ev.preventDefault();
+                         ev.stopPropagation();
+
+                         confirm(`Vas a retirar el Rol ${uRol} a l'usuari ${usrSeleccionat.username}. Procedir?`) && Meteor.callAsync('retiraRols', uRol, usrSeleccionat._id)
+                    }}>&times;</button>}
+               </li>)
+          }</ul>
+
+          {/* <ul> */}
+          {
+               ambitsUSel.map(async aus => {
+               
+                    console.log("usrSeleccionat: ", usrSeleccionat);
+                    console.log("ambitsUSel: ", ambitsUSel);
+                    const uRol = await Roles.getRolesForUserAsync(usrSeleccionat._id, {scope: aus, onlyScoped: true});
+                    return <>
+                         <h5>{aus}:</h5>
+                         {
+                              <span style={{
+                                   display: `block`,
+                                   border: `1px solid #6666`,
+                                   borderRadius: `.4em`,
+                                   padding: `4px`,
+                                   listStyle: `none`,
+                                   backgroundColor: `${'orange'}`,
+                                   textAlign: `center`
+                              }}>{uRol}
+                              {esEditor && <button onClick={ev => {
+                                   ev.preventDefault();
+                                   ev.stopPropagation();
+
+                                   confirm(`Vas a retirar el Rol ${uRol} a l'usuari ${usrSeleccionat.username}. Procedir?`) && Meteor.callAsync('retiraRols', uRol, usrSeleccionat._id, aus)
+                              }}>&times;</button>}
+                              </span>
+                         } <br />
+                    </>;
+               })
+          }
+          {/* </ul> */}
+
+          {esEditor && creantRol && <div style={{
+               display: `block`,
+               border: `1px solid #6666`,
+               padding: `.5rem`,
+               borderRadius: `.3em`,
+               margin: `1em`,
+               backgroundColor: `#fffa`
+          }}>
+               <form action={d => {
+                    Meteor.callAsync('assignaRol', usrSeleccionat._id, d.get('selRol'), d.get('selAmbit'));
+               }}>
+                    
+                    Àmbit: <select name="selAmbit" id="selAmbit"
+                         onChange={ev => setAmbitGeneral(ev.target.value === "general")}
+                    >
+                         {
+                              pobles.sort((a,b) => a.ambitAssociat > b.ambitAssociat).map((pob,i) => <option key={`optAmb_${i}`} value={pob.ambitAssociat}>{pob.ambitAssociat}</option>)
+                         }
+                         <option value={"general"}>General</option>
+                    </select> <br />
+                    
+                    Rol: <select name="selRol" id="selRol">
+                         {
+                              ambitGeneral
+                              ? <option value={"admin"}>Administrador general</option>
+                              : <>
+                                   <option value="monitor_de_poble">Monitor de poble</option>
+                                   <option value="encarregat_de_tasques">Encarregat de tasques</option>
+                                   <option value="voluntari_de_poble">Voluntairi de poble</option>
+                              </>
+                         }
+                    </select> <br /> <br />
+                    
+                    <input type="submit" value="Estableix nou rol" />
+               
+               </form>
+          </div>}
+
+          {esEditor && usrSeleccionat && <button
+               onClick={ev => {
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                    return false;
+               }}
+               onPointerUp={ev => {
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                    setCreantRol(!creantRol);
+                    return false;
+               }}
+          >+</button>}
+     </div>;
+};
+
+const QuadreInfo_Usuari = ({usrSeleccionat, esEditor, pobles, rols, ambitsUSel}) => {
+          
+     return <div style={{
+          display: `inline-block`,
+          border: `1px solid #6666`,
+          padding: `.5rem`,
+          borderRadius: `.3em`,
+          backgroundColor: `lightcyan`
+     }}>
+          
+          {usrSeleccionat && <h2>{usrSeleccionat._id}</h2>}
+          
+          <form
+               action={d => {
+                    try {
+                         Meteor.callAsync('editaOAfigPoble',
+                         {
+                              ...usrSeleccionat || [],
+                              nomPoble: d.get('nomPoble'),
+                              cp: d.get('cp') || "",
+                              comarca: d.get('comarca') || "",
+                         }).then(() => setUsrSeleccionat(null))
+                         .catch(err => console.error(err));
+                    } catch (err) {
+                         alert(err);
+                         console.error(err);
+                    }
+               }}
+          >
+               <label htmlFor="inUsername">Nom d'usuari: </label><input name="inUsername" type="text" defaultValue={ usrSeleccionat ? usrSeleccionat.username : ""}/><br />
+               <label htmlFor="inTel">Telèfon: </label><input name="inTel" type="tel" /><br />
+               <label htmlFor="inEmail">Correu Electrònic: </label><input name="inEmail" type="email" /><br />
+               <input type='submit' value="Actualitzar la Població" />
+               <button onClick={ev => {
+               ev.preventDefault();
+               if (confirm(`Vas a eliminar el poble "${usrSeleccionat.nomPoble}". És una operació irreversible. Procedir?`)) {
+                    Meteor.callAsync('eliminaPoble', usrSeleccionat._id).catch(err => console.error(err));
+                         setUsrSeleccionat(null);
+                    }
+               }}>Elimina</button>
+          </form>
+
+          { esEditor && <AssignadorDeRols {... {esEditor, usrSeleccionat, rols, pobles, ambitsUSel}} /> }
+     </div>;
+};
+
+
 export const Usuaris = () => {
      
      const [usrSeleccionat, setUsrSeleccionat] = useState(null);
@@ -260,14 +449,28 @@ export const Usuaris = () => {
      });
      // console.log("isAdmin: ", isAdmin) ;
      console.log("usuaris: ", usuaris);
+
+     // const [ambitsUSel, setAmbitsUSel] = useState([]);
      // (async () => {
-          useEffect(() => {
+
-               (async () => {
+     let ambitsUSel = [];
-                    const comprovaAdmin = await Roles.userIsInRoleAsync(userId, ["admin"]);
+
-                    setEsEditor(comprovaAdmin);
+     useEffect(() => {
-               })();
+          (async () => {
-               
+               const comprovaAdmin = await Roles.userIsInRoleAsync(userId, ["admin"]);
-          }, []);
+               setEsEditor(comprovaAdmin);
+
+               const ambits = await Roles.getScopesForUserAsync(usrSeleccionat?._id);
+               setAmbitsUSel(ambits);
+               // console.log("ambitsUSel: ", ambitsUSel);
+          })();
+          
+     }, []);
+
+
+     const rols = useTracker("rols", async () => {
+          return await Roles.getRolesForUserAsync(usrSeleccionat?._id);
+     });
      // })();
 
      // const [monitors, setMonitors] = useState(false);
@@ -307,54 +510,12 @@ export const Usuaris = () => {
      // })();
 
 
-     const QuadreInfo_Usuari = () => {
+     
-          
-          return <div style={{
-               display: `inline-block`,
-               border: `1px solid #6666`,
-               padding: `.5rem`,
-               borderRadius: `.3em`,
-               backgroundColor: `lightcyan`
-          }}>
-               
-               {usrSeleccionat && <h2>{usrSeleccionat._id}</h2>}
-               
-               <form
-                    action={d => {
-                         try {
-                              Meteor.callAsync('editaOAfigPoble',
-                              {
-                                   ...usrSeleccionat || [],
-                                   nomPoble: d.get('nomPoble'),
-                                   cp: d.get('cp') || "",
-                                   comarca: d.get('comarca') || "",
-                              }).then(() => setUsrSeleccionat(null))
-                              .catch(err => console.error(err));
-                         } catch (err) {
-                              alert(err);
-                              console.error(err);
-                         }
-                    }}
-               >
-                    <label htmlFor="inUsername">Nom d'usuari: </label><input name="inUsername" type="text" defaultValue={ usrSeleccionat ? usrSeleccionat.username : ""}/><br />
-                    <label htmlFor="inTel">Telèfon: </label><input name="inTel" type="tel" /><br />
-                    <label htmlFor="inEmail">Correu Electrònic: </label><input name="inEmail" type="email" /><br />
-                    <input type='submit' value="Actualitzar la Població" />
-                    <button onClick={ev => {
-                    ev.preventDefault();
-                    if (confirm(`Vas a eliminar el poble "${usrSeleccionat.nomPoble}". És una operació irreversible. Procedir?`)) {
-                         Meteor.callAsync('eliminaPoble', usrSeleccionat._id).catch(err => console.error(err));
-                              setUsrSeleccionat(null);
-                         }
-                    }}>Elimina</button>
-               </form>
-          </div>;
-     };
 
      return <Suspense fallback={<>Carregant...</>} >
           <h1>Usuaris</h1>
 
-          { esEditor && <QuadreInfo_Usuari /> }
+          { esEditor && <QuadreInfo_Usuari {... {usrSeleccionat, esEditor, pobles, rols, ambitsUSel}} /> }
           
           <ul style={{
                display: `flex`,
@@ -378,7 +539,7 @@ export const Usuaris = () => {
                     }}
                >
                          {/* {usr.username}{esEditor && <button onClick={() => {setUsrSeleccionat(usr)}}>Edita</button>} */}
-                         <U u={usr} esAdministrador={usr._id === Meteor.userId() && esEditor} />
+                         <U u={usr} esAdministrador={usr._id === Meteor.userId() && esEditor} setUsrSeleccionat={setUsrSeleccionat} />
                </li>)
           }</ul>
      </Suspense>;