Fora Suspense de Pobles

.meteor/versions

@@ -57,7 +57,7 @@ random@1.2.2
 rate-limit@1.1.2
 react-fast-refresh@0.2.9
 react-meteor-accounts@1.0.3
-react-meteor-data@3.0.2
+react-meteor-data@3.0.3
 reactive-var@1.0.13
 reload@1.3.2
 retry@1.1.1

eslint.config.mjs

@@ -0,0 +1,12 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import pluginReact from "eslint-plugin-react";
+
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+  {files: ["**/*.{js,mjs,cjs,jsx}"]},
+  {languageOptions: { globals: globals.browser }},
+  pluginJs.configs.recommended,
+  pluginReact.configs.flat.recommended,
+];

imports/roles.js

@@ -14,3 +14,12 @@ export const ROLS_DE_POBLE = {
 
 // export type TeamRolesKeys = keyof typeof TEAM_ROLES;
 // export type TeamRolesValues = (typeof TEAM_ROLES)[TeamRolesKeys];
+
+
+
+/////////////////////////////////////////////////////////////////////////////////////////////////////
+
+// De menor a major privilegi: 
+//
+//   Usuari < Voluntari de Poble < Encarregat de Tasques < Monitor de Poble < Administrador Global
+

imports/ui/App.jsx

@@ -5,6 +5,7 @@ import { Login } from './Login';
 import { useSubscribe, useTracker, useFind } from 'meteor/react-meteor-data/suspense';
 
 import { Pobles } from './Pobles';
+import { Poble } from './Poble';
 import { Necessitats } from './Necessitats';
 import { Tipus } from './Tipus';
 import { BarraNav } from './BarraNav/BarraNav';
@@ -22,6 +23,8 @@ export const App = () => {
 
   const [esAdministrador, setEsAdministrador] = useState(false);
 
+  // const [pobleSeleccionat, setPobleSeleccionat] = useState(null);
+
   // const u = useTracker("user", async () => await Meteor.userAsync());
 
 
@@ -33,18 +36,24 @@ export const App = () => {
 }, [user]);
   // const userId = await Meteor.userAsync();
   
-  return <BrowserRouter>
+  return <BrowserRouter
+    future={{
+      v7_relativeSplatPath: true,
+      v7_startTransition: true,
+    }}
+  >
     {Meteor.userId() && <UserStat esAdministrador={esAdministrador} setEsAdministrador={setEsAdministrador} />}
 
     <BarraNav esAdministrador={esAdministrador} setEsAdministrador={setEsAdministrador} />
 
     <Routes>
       <Route path="/" element={ <Suspense fallback={<>Carregant...</>}>{user ? <Loguejat /> : <Login/>}</Suspense> } />
-      <Route path="/usuaris" element={ <Usuaris /> } />
-      <Route path="/pobles" element={ <Pobles /> } />
-      <Route path="/necessitats" element={ <Necessitats /> } />
-      <Route path="/tipus" element={ <Tipus /> } />
-      <Route path="/login" element={ <Login /> } />
+      <Route path="usuaris" element={ <Usuaris /> } />
+      <Route path="pobles" element={ <Pobles /> } />
+      <Route path="poble/:ambitPoble" element={ <Poble /> } />
+      <Route path="necessitats" element={ <Necessitats /> } />
+      <Route path="tipus" element={ <Tipus /> } />
+      <Route path="login" element={ <Login /> } />
     </Routes>
   </BrowserRouter>
 };

imports/ui/BarraNav/PanellSeccions/PanellSeccions.jsx

@@ -16,22 +16,22 @@ export const BotóSecció = ({titol, linkto}) => {
 
 export const SeccióPobles = () => <BotóSecció
      titol="Pobles"
-     linkto="/pobles"
+     linkto="pobles"
 />;
 
 export const SeccióNecessitats = () => <BotóSecció
      titol="Necessitats"
-     linkto="/necessitats"
+     linkto="necessitats"
 />;
 
 export const SeccióTipus = () => <BotóSecció
      titol="Tipus"
-     linkto="/tipus"
+     linkto="tipus"
 />;
 
 export const SeccióUsuaris = () => <BotóSecció
      titol="Usuaris"
-     linkto="/usuaris"
+     linkto="usuaris"
 />;
 
 export const PanellSeccions = ({children}) => {

imports/ui/Login.tsx

@@ -2,7 +2,8 @@ import React, { useState } from 'react';
 import { Accounts } from 'meteor/accounts-base';
 import { useNavigate } from 'react-router-dom';
 import { Meteor } from 'meteor/meteor';
-
+import { Roles } from 'meteor/roles';
+import { ROLS_GLOBALS } from '../roles';
 
 export const Login = () => {
   const [isLogin, setIsLogin] = useState( { initialState: true } );
@@ -25,7 +26,7 @@ export const Login = () => {
     });
   };
 
-  const handleRegistration = (e) => {
+  const handleRegistration = async (e) => {
     e.preventDefault();
     // console.dir(e);
     const username = e.target.elements.username.value;
@@ -38,11 +39,16 @@ export const Login = () => {
       return null;
     }
 
-    Accounts.createUserAsync({
+    const userId = await Accounts.createUserAsync({
       username,
       email,
       password
-    }).then(() => navigate('/'))
+    });
+    console.log("userId deL NOU USUARI: ", userId);
+    userId && await Roles.addUsersToRolesAsync(userId, [ROLS_GLOBALS.USUARI]);
+    navigate('/');
+
+    return userId;
     
   };
 

imports/ui/Necessitats.jsx

@@ -59,11 +59,20 @@ export const Necessitats = () => {
                action={d => {
                     if (d.get('selTipus'))
                     try {
+                         const tipusSeleccionat = tipus.find(t => t._id === d.get('selTipus')) || "";
+                         const pobleSeleccionat = pobles.find(p => p._id === d.get('selPoble')) || "";
                          Meteor.callAsync('afigNecessitat', {
                               ...necessitatSeleccionada || [],
-                              titol: d.get('titol'),
-                              tipus: d.get('selTipus') || "",
-                              poble: d.get('selPoble')
+                              titol: d.get('taTitol'),
+                              tipus: tipusSeleccionat,
+                              poble: pobleSeleccionat,
+                              descrip: d.get('taDescripcio'),
+                              contacte: {
+                                   nom: d.get('inContacte'),
+                                   tel: d.get('inTelefon'),
+                                   email: d.get('inEMail'),
+                                   adr: d.get('inAdreça')
+                              }
                          })
                               .then(() => setNecessitatSeleccionada(null))
                               .catch(err => console.error(err))
@@ -76,7 +85,7 @@ export const Necessitats = () => {
           >
 
                <label htmlFor="taTitol">Títol</label> <br />
-               <textarea name='taTitol' placeholder='Títol de la necessitat...'></textarea>
+               <textarea name='taTitol' placeholder='Títol de la necessitat...' defaultValue={ necessitatSeleccionada ? necessitatSeleccionada.titol : ""} ></textarea>
 
                <br /><br />
 
@@ -91,6 +100,7 @@ export const Necessitats = () => {
                     formatCreateLabel={(inputValue) => "Crear nou tipus..."}
                     defaultOptions={tipus.map((v,i) => ({value: v._id, label: v.titol})).sort((a,b) => a.label.toLowerCase() > b.label.toLowerCase()) } 
                     onCreateOption={(inputValue) => Meteor.callAsync('afigTipus', {titol: inputValue})}
+                    defaultValue={ necessitatSeleccionada ? { value: necessitatSeleccionada.tipus._id, label: necessitatSeleccionada.tipus.titol} : ""}
                     // loadOptions={tipus.map((v,i) => ({value: v, label: v.titol}))}
                />
                
@@ -106,7 +116,9 @@ export const Necessitats = () => {
 
                <label htmlFor="poble">Poble</label>
 
-               <CreatableSelect name="selPoble" options={pobles.map((v,i) => ({value: v._id, label: v.nomPoble})) } />
+               <CreatableSelect name="selPoble" options={pobles.map((v,i) => ({value: v._id, label: v.nomPoble})) } 
+                    defaultValue={ necessitatSeleccionada ? { value: necessitatSeleccionada.poble._id, label: necessitatSeleccionada.poble.nomPoble} : ""}     
+               />
                {/* <select name="selPoble">
                     {
                          pobles.map((v,i) => <option key={`optPob${i}`}>{v.nomPoble}</option>)
@@ -116,7 +128,9 @@ export const Necessitats = () => {
                <br />
 
                <label htmlFor="taDescripcio">Descripció: </label> <br />
-               <textarea name="taDescripcio" id="taDescripcio" placeholder='Observacions i detalls particulars...'></textarea> <br />
+               <textarea name="taDescripcio" id="taDescripcio" placeholder='Observacions i detalls particulars...'
+                    defaultValue={ necessitatSeleccionada ? necessitatSeleccionada?.descrip : ""}
+               ></textarea> <br />
 
                <br />
                
@@ -125,10 +139,18 @@ export const Necessitats = () => {
                     border: `1px solid #6666`
                }}>
                     <legend>Contacte</legend>
-                    <input required type="text" name="inContacte" id="inContacte" placeholder='Nom' /> <br />
-                    <input required type="text" name="inTelefon" id="inTelefon" placeholder='Telèfon' /> <br />
-                    <input required type="text" name="inEMail" id="inEMail" placeholder='Correu electrònic' /> <br />
-                    <input type="text" name="inAdreça" id="inAdreça" placeholder='Adreça' /> <br />
+                    <input required type="text" name="inContacte" id="inContacte" placeholder='Nom' 
+                         defaultValue={ necessitatSeleccionada ? necessitatSeleccionada.contacte?.nom : ""}
+                    /> <br />
+                    <input required type="text" name="inTelefon" id="inTelefon" placeholder='Telèfon' 
+                         defaultValue={ necessitatSeleccionada ? necessitatSeleccionada.contacte?.tel : ""}
+                    /> <br />
+                    <input required type="text" name="inEMail" id="inEMail" placeholder='Correu electrònic' 
+                         defaultValue={ necessitatSeleccionada ? necessitatSeleccionada.contacte?.email : ""}
+                    /> <br />
+                    <input type="text" name="inAdreça" id="inAdreça" placeholder='Adreça' 
+                         defaultValue={ necessitatSeleccionada ? necessitatSeleccionada.contacte?.adr : ""}
+                    /> <br />
                </fieldset>
                
                <br />
@@ -173,7 +195,7 @@ export const Necessitats = () => {
                          backgroundColor: `${'lightgreen' || 'lightcoral'}`
                     }}
                >
-                         {nec.titol}{esEditor && <button onClick={() => {setNecessitatSeleccionada(nec)}}>Edita</button>}</li>)
+                         {nec.titol} {esEditor && <button onClick={() => {setNecessitatSeleccionada(nec)}}>Edita</button>}</li>)
           }</ul>
      </Suspense>;
 };

imports/ui/Poble.jsx

@@ -0,0 +1,228 @@
+import React, { Suspense, useEffect, useState, useRef, lazy } from 'react';
+import { Meteor } from 'meteor/meteor';
+import { PoblesCollection } from '/imports/api/pobles.js';
+import { useSubscribe, useTracker, useFind } from 'meteor/react-meteor-data/suspense';
+
+import { Roles } from 'meteor/roles';
+// import { useUserId } from 'meteor/react-meteor-accounts';
+import { BarraNav } from "./BarraNav/BarraNav";
+import { useParams } from "react-router-dom";
+import { NecessitatsCollection } from '../api/necessitats';
+
+
+
+
+export const Poble = () => {
+     
+     let { ambitPoble } = useParams();
+
+     // const [pobleSeleccionat, setPobleSeleccionat] = useState(null);
+     // const [creantPoble, setCreantPoble] = useState(false);
+     useSubscribe('pobles');
+     useSubscribe('usuaris');
+     useSubscribe('necessitats', ambitPoble);
+     // const pobles = useTracker("pobles", () => PoblesCollection.find().fetchAsync());
+     const pobles = useFind(PoblesCollection, [{}, {sort: {nomPoble: 1}}]);
+     const necessitats = useFind(NecessitatsCollection, [{}, {sort: {titol: 1}}]);
+
+     
+     const [esEditor, setEsEditor] = useState(false);
+     const userId = Meteor.userId();
+     let pob;
+
+     // console.log("ambitPoble: ", ambitPoble);
+     // console.log("pobles: ", pobles);
+     pob = pobles.find(p => p.ambitAssociat === ambitPoble);
+     // console.log("pob: ", pob);
+
+     // console.log("isAdmin: ", isAdmin) ;
+     
+     // (async () => {
+          useEffect(() => {
+               (async () => {
+                    const comprovaAdmin = await Roles.userIsInRoleAsync(userId, ["admin"]);
+                    setEsEditor(comprovaAdmin);
+
+               })();
+          }, []);
+     // })();
+
+     
+     
+     // const QuadreInfo_Poble = () => {
+          
+     //      const refInAmbitAssignat = useRef();
+
+     //      return <div style={{
+     //           display: `inline-block`,
+     //           border: `1px solid #6666`,
+     //           padding: `.5rem`,
+     //           borderRadius: `.3em`,
+     //           backgroundColor: `lightcyan`
+     //      }}>
+               
+     //           {pobleSeleccionat && <h2>{pobleSeleccionat._id}</h2>}
+
+     //           <form
+     //                action={d => {
+     //                     try {
+     //                          Meteor.callAsync('editaOAfigPoble',
+     //                          {
+     //                               ...pobleSeleccionat || [],
+     //                               nomPoble: d.get('nomPoble'),
+     //                               cp: d.get('cp') || "",
+     //                               comarca: d.get('comarca') || "",
+     //                               ambitAssociat: d.get('ambit-associat')
+     //                          }).then(() => setPobleSeleccionat(null))
+     //                          .catch(err => console.error(err));
+     //                     } catch (err) {
+     //                          alert(err);
+     //                          console.error(err);
+     //                     }
+     //                }}
+     //           >
+     //                <label htmlFor="nomPoble">Població: </label>
+     //                <input
+     //                     name="nomPoble"
+     //                     type="text"
+     //                     defaultValue={ pobleSeleccionat ? pobleSeleccionat.nomPoble : ""}
+     //                     onChange={ev => refInAmbitAssignat.current.value = ev.target.value.replace(/ +/g, '-').toLowerCase()}
+     //                /><br />
+     //                <label htmlFor="comarca">Comarca: </label><input name="comarca" type="text" /><br />
+     //                <label htmlFor="cp">Codi Postal: </label><input name="cp" type="text" /><br />
+                    
+     //                { esEditor && <>
+     //                <br /><br />
+     //                Àmbit associat:
+
+     //                <input type="text" name="ambit-associat" id="ambit-associat" defaultValue={pobleSeleccionat?.ambitAssociat} ref={refInAmbitAssignat} />
+     //                {/* // nomPoble.replace(/ +/g, '-').toLowerCase()}/> */}
+     //                <br /><br />
+     //                </>}
+
+     //                <input type='submit' value="Actualitzar la Població" />
+     //                <button onClick={ev => {
+     //                ev.preventDefault();
+     //                if (confirm(`Vas a eliminar el poble "${pobleSeleccionat.nomPoble}". És una operació irreversible. Procedir?`)) {
+     //                     Meteor.callAsync('eliminaPoble', pobleSeleccionat._id).catch(err => console.error(err));
+     //                          setPobleSeleccionat(null);
+     //                     }
+     //                }}>Elimina</button>
+     //           </form>
+     //      </div>;
+     // };
+     
+     return <Suspense fallback={<>Carregant...</>} >
+          
+          <h1>{pob?.nomPoble}</h1>
+
+          <h2>Monitores:</h2>
+          <ul>
+               {
+                    (async () => {
+                         const monitors = await Roles.getUsersInRoleAsync("monitor_de_poble", pob?.ambitAssociat);
+                         // console.log("monitors: ", monitors);
+                         return monitors?.map( (u) => <li style={{
+                              display: `block`,
+                              border: `1px solid #6666`,
+                              borderRadius: `.4em`,
+                              padding: `4px`,
+                              listStyle: `none`,
+                              backgroundColor: `${'lightcoral'}`
+                         }}>{u.username}</li> );
+                    })()
+               }
+          </ul>
+
+          <h2>Encarregades de tasques:</h2>
+          <ul>
+               {
+                    (async () => {
+                         const encarregats = await Roles.getUsersInRoleAsync("encarregat_de_tasques", pob?.ambitAssociat);
+                         // console.log("encarregats: ", encarregats);
+                         return encarregats?.map( (u) => <li style={{
+                              display: `block`,
+                              border: `1px solid #6666`,
+                              borderRadius: `.4em`,
+                              padding: `4px`,
+                              listStyle: `none`,
+                              backgroundColor: `${'orange'}`
+                         }}>{u.username}</li> );
+                    })()
+               }
+          </ul>
+
+          <h2>Voluntàries de poble:</h2>
+          <ul>
+               {
+                    (async () => {
+                         const voluntaris = await Roles.getUsersInRoleAsync("voluntari_de_poble", pob?.ambitAssociat);
+                         // console.log("voluntaris: ", voluntaris);
+                         return voluntaris?.map( (u) => <li style={{
+                              display: `block`,
+                              border: `1px solid #6666`,
+                              borderRadius: `.4em`,
+                              padding: `4px`,
+                              listStyle: `none`,
+                              backgroundColor: `${'lightgreen'}`
+                         }}>{u.username}</li> );
+                    })()
+               }
+          </ul>
+
+          <h2>Necessitats:</h2>
+
+          <ul style={{
+               display: `flex`,
+               flexWrap: `wrap`,
+               justifyContent: `space-evenly`,
+               rowGap: `.3em`,
+               alignContent: `space-around`
+          }}>{
+          necessitats
+               .sort((a,b) => a.titol?.toLowerCase() > b.titol?.toLowerCase())
+               .map(nec => <li
+                    key={`nec_${nec._id}`}
+                    style={{
+                         display: `block`,
+                         border: `1px solid #6666`,
+                         borderRadius: `.4em`,
+                         padding: `4px`,
+                         listStyle: `none`,
+                         backgroundColor: `${'lightgreen' || 'lightcoral'}`
+                    }}
+               >
+                    {nec.titol} {esEditor && <button onClick={() => {setNecessitatSeleccionada(nec)}}>Edita</button>}</li>)
+          }</ul>
+
+          {/* { esEditor && (pobleSeleccionat || creantPoble) && <QuadreInfo_Poble /> }
+          
+          <ul style={{
+               display: `flex`,
+               flexWrap: `wrap`,
+               justifyContent: `space-evenly`,
+               rowGap: `.3em`,
+               alignContent: `space-around`
+          }}>{
+          pobles
+               .sort((a,b) => a.nomPoble?.toLowerCase() > b.nomPoble?.toLowerCase())
+               .map(pob => <li
+                    key={`pob_${pob._id}`}
+                    style={{
+                         display: `block`,
+                         border: `1px solid #6666`,
+                         borderRadius: `.4em`,
+                         padding: `4px`,
+                         listStyle: `none`,
+                         backgroundColor: `${'lightgreen' || 'lightcoral'}`
+                    }}
+               >
+                         {pob.nomPoble}{esEditor && <button onClick={() => {setPobleSeleccionat(pob)}}>Edita</button>}</li>)
+          }</ul>
+          {esEditor && <button
+               onPointerUp={ev => {
+                    setCreantPoble(!creantPoble);
+               }}
+          >+</button>} */}
+     </Suspense>;
+};

imports/ui/Pobles.jsx

@@ -6,6 +6,8 @@ import { useSubscribe, useTracker, useFind } from 'meteor/react-meteor-data/susp
 import { Roles } from 'meteor/roles';
 // import { useUserId } from 'meteor/react-meteor-accounts';
 import { BarraNav } from "./BarraNav/BarraNav";
+import { Link } from 'react-router-dom';
+import { NecessitatsCollection } from '../api/necessitats';
 
 
 
@@ -13,7 +15,10 @@ import { BarraNav } from "./BarraNav/BarraNav";
 export const Pobles = () => {
      
      const [pobleSeleccionat, setPobleSeleccionat] = useState(null);
+     const [creantPoble, setCreantPoble] = useState(false);
      useSubscribe('pobles');
+     useSubscribe('usuaris');
+
      // const pobles = useTracker("pobles", () => PoblesCollection.find().fetchAsync());
      const pobles = useFind(PoblesCollection, [{}, {sort: {nomPoble: 1}}]);
      
@@ -31,8 +36,143 @@ export const Pobles = () => {
           }, []);
      // })();
 
+     const BotoPobleAmbIndicadors = ({pob}) => {
+          useSubscribe('necessitats', pob.ambitAssociat);
+          const necessitats = useFind(NecessitatsCollection, [{"poble.ambitAssociat": pob.ambitAssociat}]);
+          const [monitors, setMonitors] = useState(false);
+          const [encarregats, setEncarregats] = useState(false);
+          const [voluntaris, setVoluntaris] = useState(false);
+          
+          // let mon, mons, enc, encs, vol, vols;
+
+          (async () => {
+               const mons = await Roles.getUsersInRoleAsync("monitor_de_poble", pob?.ambitAssociat);
+               // console.log("monitors: ", monitors);
+               setMonitors(mons?.fetch().length || false);
+
+               const encs = await Roles.getUsersInRoleAsync("encarregat_de_tasques", pob?.ambitAssociat);
+               // console.log("monitors: ", monitors);
+               setEncarregats(encs?.fetch().length || false);
+
+               const vols = await Roles.getUsersInRoleAsync("voluntari_de_poble", pob?.ambitAssociat);
+               // console.log("monitors: ", monitors);
+               setVoluntaris(vols?.fetch().length || false);
+          })();
+
+          return <li
+               key={`pob_${pob._id}`}
+               style={{
+                    display: `block`,
+                    border: `1px solid #6666`,
+                    borderRadius: `.4em`,
+                    padding: `4px`,
+                    listStyle: `none`,
+                    backgroundColor: `${'lightgreen' || 'lightcoral'}`,
+                    position: 'relative',
+                    margin: '.2em'
+               }}
+          >
+               {// Indicadors de Responsables
+                    <div style={{
+                         position: `absolute`,
+                         // display: `inline-block`,
+                         display: `grid`,
+                         gridTemplateAreas: `"mons encs vols"`,
+                         justifyContent: `space-around`,
+                         left: `0`,
+                         top: `-.8em`,
+                         width: `100%`,
+                         fontSize: `60%`,
+                         textAlign: `center`,
+                         pointerEvents: `none`,
+                         alignItems: `center`
+                    }}>
+                         {
+                              monitors
+                              ? <span style={{
+                                   border: `1px solid #6666`,
+                                   borderRadius: `50%`,
+                                   minWidth: `1rem`,
+                                   minHeight: `1rem`,
+                                   backgroundColor: `#f006`,
+                                   gridArea: `mons`
+                              }}>{monitors}</span>
+                              : false
+                         }
+                         {    encarregats
+                              ? <span style={{
+                                   border: `1px solid #6666`,
+                                   borderRadius: `50%`,
+                                   minWidth: `1rem`,
+                                   minHeight: `1rem`,
+                                   backgroundColor: `#fa0a`,
+                                   gridArea: `encs`
+                              }}>{encarregats}</span>
+                              : false
+                         }
+                         {    voluntaris
+                              ? <span style={{
+                                   border: `1px solid #6666`,
+                                   borderRadius: `50%`,
+                                   minWidth: `1rem`,
+                                   minHeight: `1rem`,
+                                   backgroundColor: `#ff06`,
+                                   gridArea: `vols`
+                              }}>{voluntaris}</span>
+                              : false
+                         }
+                    </div>
+               }
+
+               {// Indicadors de Necessitats
+                    <div style={{
+                         position: `absolute`,
+                         // display: `inline-block`,
+                         display: `flex`,
+                         // justifyContent: `space-around`,
+                         left: `-1.5em`,
+                         // top: `-.8em`,
+                         width: `100%`,
+                         fontSize: `60%`,
+                         textAlign: `center`,
+                         // lineHeight: `100%`
+                         top: `.8em`,
+                         pointerEvents: `none`
+                    }}>
+                         {
+                              necessitats.length
+                              ?
+                                   <span style={{
+                                        border: `1px solid #6666`,
+                                        borderRadius: `50%`,
+                                        minWidth: `1rem`,
+                                        backgroundColor: `#00a6`
+                                   }}>{necessitats.length }</span>
+                              : false
+                         }
+                    </div>
+               }
+
+               {// Botó de creació de nou poble
+                    <Link to={`/poble/${pob.ambitAssociat}`}>
+                         {pob.nomPoble} {esEditor && <button
+                              onClick={(ev) => {
+                                   ev.preventDefault();
+                                   ev.stopPropagation();
+                                   
+                                   setPobleSeleccionat(pob);
+                              }
+                         }>Edita</button>}
+                    </Link>
+               }
+          </li>;
+     }
+     
+     
      const QuadreInfo_Poble = () => {
           
+          const refInAmbitAssignat = useRef();
+
           return <div style={{
                display: `inline-block`,
                border: `1px solid #6666`,
@@ -42,7 +182,6 @@ export const Pobles = () => {
           }}>
                
                {pobleSeleccionat && <h2>{pobleSeleccionat._id}</h2>}
-               <h1>Pobles</h1>
 
                <form
                     action={d => {
@@ -53,6 +192,7 @@ export const Pobles = () => {
                                    nomPoble: d.get('nomPoble'),
                                    cp: d.get('cp') || "",
                                    comarca: d.get('comarca') || "",
+                                   ambitAssociat: d.get('ambit-associat')
                               }).then(() => setPobleSeleccionat(null))
                               .catch(err => console.error(err));
                          } catch (err) {
@@ -61,9 +201,25 @@ export const Pobles = () => {
                          }
                     }}
                >
-                    <label htmlFor="nomPoble">Població: </label><input name="nomPoble" type="text" defaultValue={ pobleSeleccionat ? pobleSeleccionat.nomPoble : ""}/><br />
+                    <label htmlFor="nomPoble">Població: </label>
+                    <input
+                         name="nomPoble"
+                         type="text"
+                         defaultValue={ pobleSeleccionat ? pobleSeleccionat.nomPoble : ""}
+                         onChange={ev => refInAmbitAssignat.current.value = ev.target.value.replace(/ +/g, '-').toLowerCase()}
+                    /><br />
                     <label htmlFor="comarca">Comarca: </label><input name="comarca" type="text" /><br />
                     <label htmlFor="cp">Codi Postal: </label><input name="cp" type="text" /><br />
+                    
+                    { esEditor && <>
+                    <br /><br />
+                    Àmbit associat:
+
+                    <input type="text" name="ambit-associat" id="ambit-associat" defaultValue={pobleSeleccionat?.ambitAssociat} ref={refInAmbitAssignat} />
+                    {/* // nomPoble.replace(/ +/g, '-').toLowerCase()}/> */}
+                    <br /><br />
+                    </>}
+
                     <input type='submit' value="Actualitzar la Població" />
                     <button onClick={ev => {
                     ev.preventDefault();
@@ -76,9 +232,15 @@ export const Pobles = () => {
           </div>;
      };
 
-     return <Suspense fallback={<>Carregant...</>} >
+     // const Indicador = ({valor, ambit, }) => {
 
-          { esEditor && <QuadreInfo_Poble /> }
+     // };
+     
+     return <>
+          
+          <h1>Pobles</h1>
+
+          { esEditor && (pobleSeleccionat || creantPoble) && <QuadreInfo_Poble /> }
           
           <ul style={{
                display: `flex`,
@@ -89,18 +251,15 @@ export const Pobles = () => {
           }}>{
           pobles
                .sort((a,b) => a.nomPoble?.toLowerCase() > b.nomPoble?.toLowerCase())
-               .map(pob => <li
-                    key={`pob_${pob._id}`}
-                    style={{
-                         display: `block`,
-                         border: `1px solid #6666`,
-                         borderRadius: `.4em`,
-                         padding: `4px`,
-                         listStyle: `none`,
-                         backgroundColor: `${'lightgreen' || 'lightcoral'}`
-                    }}
-               >
-                         {pob.nomPoble}{esEditor && <button onClick={() => {setPobleSeleccionat(pob)}}>Edita</button>}</li>)
+               .map(pob => {
+                    return <BotoPobleAmbIndicadors pob={pob} key={`pob_${pob.ambitAssociat}`} />
+               })
           }</ul>
-     </Suspense>;
+
+          {esEditor && <button
+               onPointerUp={ev => {
+                    setCreantPoble(!creantPoble);
+               }}
+          >+</button>}
+     </>;
 };

imports/ui/Usuaris.jsx

@@ -7,12 +7,153 @@ import { Roles } from 'meteor/roles';
 // import { useUserId } from 'meteor/react-meteor-accounts';
 import { BarraNav } from "./BarraNav/BarraNav";
 
+const isClickInsideRectangle = (e, element) => {
+     const r = element?.getBoundingClientRect();
 
+     return (
+          e.clientX > r.left &&
+          e.clientX < r.right &&
+          e.clientY > r.top &&
+          e.clientY < r.bottom
+     );
+};
 
+const AssignadorDeRols = ({pobles, ambitGeneral, esEditor, rols, usrSeleccionat}) => {
+     const [creantRol, setCreantRol] = useState(false);
+     const [ambitsUSel, setAmbitsUSel] = useState([]);
+
+     useEffect(() => {
+          (async () => {
+               const ambits = await Roles.getScopesForUserAsync(usrSeleccionat?._id);
+               setAmbitsUSel(ambits);
+          })();
+     }, []);
+
+     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 => {
+               
+                    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>;
+};
 
 export const Usuaris = () => {
-     
+     const refQuadreSeleccionat = useRef();
      const [usrSeleccionat, setUsrSeleccionat] = useState(null);
+
      useSubscribe('pobles');
      const pobles = useTracker("pobles", () => PoblesCollection.find().fetchAsync());
      
@@ -21,10 +162,17 @@ export const Usuaris = () => {
      
      const usuaris = useTracker("usuaris", () => {
           Meteor.subscribe('usuaris');
-          return Meteor.users.find().fetch().filter(u => u._id !== Meteor.userId());
+          return Meteor.users.find().fetch()//.filter(u => u._id !== Meteor.userId());
      });
+
+     const rols = useTracker("rols", async () => {
+          return await Roles.getRolesForUserAsync(usrSeleccionat?._id);
+     });
+
+     // console.log("rols: ", rols);
+     
      // console.log("isAdmin: ", isAdmin) ;
-     console.log("usuaris: ", usuaris);
+     // console.log("usuaris: ", usuaris);
      // (async () => {
           useEffect(() => {
                (async () => {
@@ -35,15 +183,34 @@ export const Usuaris = () => {
           }, []);
      // })();
 
+
      const QuadreInfo_Usuari = () => {
 
+          // const [rols, setRols] = useState([]);
+          
+          const [ambitGeneral, setAmbitGeneral] = useState(false);
+          
+
+          let allScopes;
+          
+          // useEffect( async () => {
+          //      allScopes = await Roles.getScopesForUserAsync(usrSeleccionat?._id);
+          //      // Roles.getRolesForUser(usrSeleccionat?._id).map(uRol => <li>{uRol}</li>);
+               
+          //      // setRols(rols);
+          // });
+
+
+          
           return <div style={{
                     display: `inline-block`,
                     border: `1px solid #6666`,
                     padding: `.5rem`,
                     borderRadius: `.3em`,
                     backgroundColor: `lightcyan`
-          }}>
+               }}
+               ref={refQuadreSeleccionat}
+          >
                
                {usrSeleccionat && <h2>{usrSeleccionat._id}</h2>}
                
@@ -66,23 +233,30 @@ export const Usuaris = () => {
                >
                     <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ó" />
+                    <label htmlFor="inEmail">Correu Electrònic: </label><input name="inEmail" type="email" />
+                    
+                    <input type='submit' value="Actualitza les dades" />
                     <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));
+                         if (confirm(`Vas a eliminar l'usuari "${usrSeleccionat.username}". És una operació irreversible. Procedir?`)) {
+                              Meteor.callAsync('eliminaUsuari', usrSeleccionat._id).catch(err => console.error(err));
                               setUsrSeleccionat(null);
                          }
                     }}>Elimina</button>
                </form>
+
+               { esEditor && <AssignadorDeRols {... {pobles, ambitGeneral, esEditor, rols, usrSeleccionat}} /> }
+
           </div>;
      };
 
-     return <Suspense fallback={<>Carregant...</>} >
+     return <div onPointerUp={ev => {
+          !isClickInsideRectangle(ev, refQuadreSeleccionat.current) && setUsrSeleccionat(null);
+     }}><Suspense fallback={<>Carregant...</>} >
+
           <h1>Usuaris</h1>
 
-          { esEditor && <QuadreInfo_Usuari /> }
+          { esEditor && usrSeleccionat && <QuadreInfo_Usuari /> }
           
           <ul style={{
                display: `flex`,
@@ -106,5 +280,8 @@ export const Usuaris = () => {
                >
                     {usr.username}{esEditor && <button onClick={() => {setUsrSeleccionat(usr)}}>Edita</button>}</li>)
           }</ul>
-     </Suspense>;
+
+          {esEditor && !usrSeleccionat && <button>+</button>}
+
+     </Suspense></div>;
 };

package.json

@@ -12,6 +12,7 @@
     "meteor-node-stubs": "^1.2.5",
     "react": "19",
     "react-dom": "19",
+    "react-router": "^7.0.2",
     "react-router-dom": "^6.28.0",
     "react-select": "^5.8.3",
     "styled-components": "^6.1.13"
@@ -22,5 +23,9 @@
       "server": "server/main.js"
     },
     "testModule": "tests/main.js"
+  },
+  "devDependencies": {
+    "babel-plugin-react-compiler": "^19.0.0-beta-55955c9-20241229",
+    "eslint-plugin-react-compiler": "^19.0.0-beta-55955c9-20241229"
   }
 }

server/main.js

@@ -184,7 +184,16 @@ Meteor.startup(async () => {
     return PoblesCollection.find();
   });
 
-  Meteor.publish("necessitats", function () {
+  Meteor.publish("necessitats", function (ambits) {
+
+    if (Array.isArray(ambits)) {
+      return;
+    }
+
+    if (ambits) {
+      return NecessitatsCollection.find({"poble.ambitAssociat": ambits});
+    }
+
     return NecessitatsCollection.find();
   });
 
@@ -194,13 +203,20 @@ Meteor.startup(async () => {
 
   Meteor.publish('usuaris', async function (uid) {
 
-    const esAdmin = await Roles.userIsInRoleAsync(Meteor.userId(), "admin");
-    const userRoles = await Roles.getRolesForUserAsync(Meteor.userId());
+    const esAdmin = await Roles.userIsInRoleAsync(this.userId, "admin", null);
+    const userRoles = await Roles.getRolesForUserAsync(this.userId);
 
     console.log("userRoles: ", userRoles);
-    if (uid) {
-      return Meteor.users.find({_id: uid},{fields: {username: 1, avatarId: 1, avatarLink: 1}});
+    console.log("esAdmin: ", esAdmin);
+
+    if (esAdmin) {
+      return Meteor.users.find({});
     }
+
+    if (uid) {
+      return Meteor.users.find({_id: uid}, {fields: {username: 1, avatarId: 1, avatarLink: 1}});
+    }
+
     return Meteor.users.find({},{fields: {username: 1, avatarId: 1, avatarLink: 1}});
   });
   ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -213,33 +229,53 @@ Meteor.startup(async () => {
     await Roles.createRoleAsync(ROLS_DE_POBLE.ENCARREGAT, { unlessExists: true });
     await Roles.createRoleAsync(ROLS_DE_POBLE.VOLUNTARI, { unlessExists: true });
 
-    await Roles.addRolesToParentAsync([ROLS_DE_POBLE.VOLUNTARI, ROLS_DE_POBLE.ENCARREGAT], ROLS_DE_POBLE.MONITOR);
-    await Roles.addRolesToParentAsync([ROLS_DE_POBLE.VOLUNTARI, ROLS_DE_POBLE.ENCARREGAT, ROLS_DE_POBLE.MONITOR, ROLS_GLOBALS.USUARI], ROLS_GLOBALS.ADMINISTRADOR);
+    // await Roles.addRolesToParentAsync([ROLS_DE_POBLE.VOLUNTARI, ROLS_DE_POBLE.ENCARREGAT], ROLS_DE_POBLE.MONITOR);
+    // await Roles.addRolesToParentAsync([ROLS_DE_POBLE.VOLUNTARI, ROLS_DE_POBLE.ENCARREGAT, ROLS_DE_POBLE.MONITOR, ROLS_GLOBALS.USUARI], ROLS_GLOBALS.ADMINISTRADOR);
     
   } catch (err) {
     console.error(err.message);
   }
 
   // Publish user's own roles
-Meteor.publish(null, function () {
-  if (this.userId) {
-    return Meteor.roleAssignment.find({ "user._id": this.userId });
-  }
-  this.ready();
+Meteor.publish(null, async function () {
+  // if (await Roles.userIsInRoleAsync(this.userId, "admin")) {
+    return Meteor.roleAssignment.find();
+  // }
+
+  // if (this.userId) {
+  //   return Meteor.roleAssignment.find({ "user._id": this.userId });
+  // }
+  // this.ready();
 });
 
 // Publish roles for specific scope
 // Meteor.publish("scopeRoles", function (scope) {
 //   if (this.userId) {
 //     return Meteor.roleAssignment.find({ scope: scope });
-//   }
+//   }2024-12-19 21:40:26
 //   this.ready();
 // });
+Accounts.onCreateUser(async (options, user) => {
+  await Roles.addUsersToRolesAsync(user._id, ROLS_GLOBALS.USUARI);
+  return user;
+});
 
   ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
   
-  Meteor.methods({
+Meteor.methods({
+    'assignaRol': async function (userId, rols, ambits) {
+      const esAdmin = await Roles.userIsInRoleAsync(Meteor.userId(), "admin");
+      esAdmin && await Roles.addUsersToRolesAsync(userId, rols, ambits);
+      console.log(`Rol "${rols}" assignat a l'usuari "${userId}" delimitat amb l'àmbit "${ambits}"`);
+    },
+
+    'retiraRols': async function (rols, userId, ambits) {
+      const esAdmin = await Roles.userIsInRoleAsync(Meteor.userId(), "admin");
+      esAdmin && await Roles.removeUsersFromRolesAsync(userId, rols, ambits);
+
+      console.log(`Retirats els rols "${rols}" de l'usuari "${userId}"`);
+    },
     
     'editaOAfigPoble': async function (poble) {
       const esAdmin = await Roles.userIsInRoleAsync(Meteor.userId(), "admin");
@@ -305,6 +341,20 @@ Meteor.publish(null, function () {
       }
     },
 
+    'eliminaUsuari': async function (usuariId) {
+      const esAdmin = await Roles.userIsInRoleAsync(Meteor.userId(), "admin");
+      try {
+        console.log(`ELIMINACIÓ D'USUARI sol·licitada per a ${usuariId}. Comprovant si ${Meteor.userId()} és Admin: `, esAdmin);
+        if (esAdmin && usuariId) {
+          return await Meteor.users.removeAsync(usuariId);
+        } else {
+          throw new Error("El nom de l'usuari no és vàlid");
+        }
+      } catch (e) {
+        console.error(e);
+      }
+    },
+
     'afigTipus': async function (tipus) {
       const esAdmin = await Roles.userIsInRoleAsync(Meteor.userId(), "admin");
       try {