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,69 +247,147 @@ const U = ({u, esAdministrador}) => {
 };
 
 
-export const Usuaris = () => {
 
-     const [usrSeleccionat, setUsrSeleccionat] = useState(null);
+const AssignadorDeRols = ({pobles, ambitGeneral, esEditor, rols, usrSeleccionat, ambitsUSel}) => {
-     useSubscribe('pobles');
+     const [creantRol, setCreantRol] = useState(false);
-     const pobles = useTracker("pobles", () => PoblesCollection.find().fetchAsync());
+     // const [ambitsUSel, setAmbitsUSel] = useState([]);
-     
+     // let ambitsUSel;
-     const [esEditor, setEsEditor] = useState(false);
+     // let ambitsUSel = [];
-     const userId = Meteor.userId();
+     // useEffect(() => {
-     
-     const usuaris = useTracker("usuaris", () => {
-          Meteor.subscribe('usuaris');
-          return Meteor.users.find().fetch();//.filter(u => u._id !== Meteor.userId());
-     });
-     // console.log("isAdmin: ", isAdmin) ;
-     console.log("usuaris: ", usuaris);
      // (async () => {
-          useEffect(() => {
+     //      const ambits = await Roles.getScopesForUserAsync(usrSeleccionat?._id);
-               (async () => {
+     //      // console.log("ambitsUSel: ", ambitsUSel);
-                    const comprovaAdmin = await Roles.userIsInRoleAsync(userId, ["admin"]);
+     //      // ambitsUSel = ambits;
-                    setEsEditor(comprovaAdmin);
+     //      // setAmbitsUSel(ambits);
-               })();
+     //      ambitsUSel = ambits;
-               
+     //      // console.log("ambitsUSel: ", ambitsUSel);
-          }, []);
      // })();
+     // }, []);
 
-     // const [monitors, setMonitors] = useState(false);
+     return <div
-     // const [encarregats, setEncarregats] = useState(false);
+          style={{
-     // const [voluntaris, setVoluntaris] = useState(false);
+               display: `block`,
-     // const [administradors, setAdministradors] = useState(false);
+               border: `1px solid #6666`,
+               padding: `.5rem`,
+               borderRadius: `.3em`,
+               margin: `1em`,
+               backgroundColor: `#fffa`
+          }}
+     >
+          <h3>Rols</h3>
 
-     // let mon, mons, enc, encs, vol, vols;
+          <h4>Àmbits</h4>
-     // let
+          <h5>General:</h5>
-     //      administradors,
+          <ul>{
-     //      monitors,
+               rols?.map(uRol => <li
-     //      encarregats,
+                    key={`rol_${uRol}`}
-     //      voluntaris
+                    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>
 
-     // (async () => {
+          {/* <ul> */}
-     //      const admins = await Roles.getUsersInRoleAsync("administrador");
+          {
-     //      // console.log("admins: ", admins);
+               ambitsUSel.map(async aus => {
-     //      administradors = await admins?.fetchAsync();
-     //      console.log("administradors: ", administradors);
                
-     //      const mons = await Roles.getUsersInRoleAsync("monitor_de_poble");
+                    console.log("usrSeleccionat: ", usrSeleccionat);
-     //      // console.log("mons: ", mons);
+                    console.log("ambitsUSel: ", ambitsUSel);
-     //      monitors = await mons?.fetchAsync();
+                    const uRol = await Roles.getRolesForUserAsync(usrSeleccionat._id, {scope: aus, onlyScoped: true});
-     //      console.log("monitors: ", monitors);
+                    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();
 
-     //      const encs = await Roles.getUsersInRoleAsync("encarregat_de_tasques");
+                                   confirm(`Vas a retirar el Rol ${uRol} a l'usuari ${usrSeleccionat.username}. Procedir?`) && Meteor.callAsync('retiraRols', uRol, usrSeleccionat._id, aus)
-     //      // console.log("encs: ", encs);
+                              }}>&times;</button>}
-     //      encarregats = await encs?.fetchAsync();
+                              </span>
-     //      console.log("encarregats: ", encarregats);
+                         } <br />
+                    </>;
+               })
+          }
+          {/* </ul> */}
 
-     //      const vols = await Roles.getUsersInRoleAsync("voluntari_de_poble");
+          {esEditor && creantRol && <div style={{
-     //      // console.log("vols: ", vols);
+               display: `block`,
-     //      voluntaris = await vols?.fetchAsync();
+               border: `1px solid #6666`,
-     //      console.log("voluntaris: ", voluntaris);
+               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 />
                     
-     const QuadreInfo_Usuari = () => {
+                    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`,
@@ -348,13 +428,94 @@ export const Usuaris = () => {
                     }
                }}>Elimina</button>
           </form>
+
+          { esEditor && <AssignadorDeRols {... {esEditor, usrSeleccionat, rols, pobles, ambitsUSel}} /> }
      </div>;
 };
 
+
+export const Usuaris = () => {
+     
+     const [usrSeleccionat, setUsrSeleccionat] = useState(null);
+     useSubscribe('pobles');
+     const pobles = useTracker("pobles", () => PoblesCollection.find().fetchAsync());
+     
+     const [esEditor, setEsEditor] = useState(false);
+     const userId = Meteor.userId();
+     
+     const usuaris = useTracker("usuaris", () => {
+          Meteor.subscribe('usuaris');
+          return Meteor.users.find().fetch();//.filter(u => u._id !== Meteor.userId());
+     });
+     // console.log("isAdmin: ", isAdmin) ;
+     console.log("usuaris: ", usuaris);
+
+     // const [ambitsUSel, setAmbitsUSel] = useState([]);
+     // (async () => {
+
+     let ambitsUSel = [];
+
+     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);
+     // const [encarregats, setEncarregats] = useState(false);
+     // const [voluntaris, setVoluntaris] = useState(false);
+     // const [administradors, setAdministradors] = useState(false);
+
+     // let mon, mons, enc, encs, vol, vols;
+     // let
+     //      administradors,
+     //      monitors,
+     //      encarregats,
+     //      voluntaris
+     // ;
+          
+
+     // (async () => {
+     //      const admins = await Roles.getUsersInRoleAsync("administrador");
+     //      // console.log("admins: ", admins);
+     //      administradors = await admins?.fetchAsync();
+     //      console.log("administradors: ", administradors);
+          
+     //      const mons = await Roles.getUsersInRoleAsync("monitor_de_poble");
+     //      // console.log("mons: ", mons);
+     //      monitors = await mons?.fetchAsync();
+     //      console.log("monitors: ", monitors);
+
+     //      const encs = await Roles.getUsersInRoleAsync("encarregat_de_tasques");
+     //      // console.log("encs: ", encs);
+     //      encarregats = await encs?.fetchAsync();
+     //      console.log("encarregats: ", encarregats);
+
+     //      const vols = await Roles.getUsersInRoleAsync("voluntari_de_poble");
+     //      // console.log("vols: ", vols);
+     //      voluntaris = await vols?.fetchAsync();
+     //      console.log("voluntaris: ", voluntaris);
+     // })();
+
+
+     
+
      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>;