Després d'un clot

.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

client/main.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {StrictMode} from 'react';
 import { createRoot } from 'react-dom/client';
 import { Meteor } from 'meteor/meteor';
 import { App } from '/imports/ui/App';
@@ -6,5 +6,7 @@ import { App } from '/imports/ui/App';
 Meteor.startup(() => {
   const container = document.getElementById('react-target');
   const root = createRoot(container);
-  root.render(<App />);
+  root.render(<StrictMode>
+    <App />
+  </StrictMode>);
 });

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());
 
 
@@ -45,11 +48,12 @@ export const App = () => {
 
     <Routes>
       <Route path="/" element={ <Suspense fallback={<>Carregant...</>}>{user ? <Loguejat /> : <Login/>}</Suspense> } />
-      <Route path="/usuaris" element={ <Usuaris /> } />
+      <Route path="usuaris" element={ <Usuaris /> } />
-      <Route path="/pobles" element={ <Pobles /> } />
+      <Route path="pobles" element={ <Pobles /> } />
-      <Route path="/necessitats" element={ <Necessitats /> } />
+      <Route path="poble/:ambitPoble" element={ <Poble /> } />
-      <Route path="/tipus" element={ <Tipus /> } />
+      <Route path="necessitats" element={ <Necessitats /> } />
-      <Route path="/login" element={ <Login /> } />
+      <Route path="tipus" element={ <Tipus /> } />
+      <Route path="login" element={ <Login /> } />
     </Routes>
   </BrowserRouter>
 };

imports/ui/BarraNav/BarraNav.jsx

@@ -19,6 +19,10 @@ const SeccióUsuaris = lazy(async () => {
     const module = await import('/imports/ui/BarraNav/PanellSeccions/PanellSeccions.jsx');
     return ({ default: module.SeccióUsuaris });
 });
+const SeccióCodis = lazy(async () => {
+    const module = await import('/imports/ui/BarraNav/PanellSeccions/PanellSeccions.jsx');
+    return ({ default: module.SeccióCodis });
+});
 
 const BarraNav = ({esAdministrador, setEsAdministrador}) => {
     const userId = Meteor.userId();
@@ -38,6 +42,7 @@ const BarraNav = ({esAdministrador, setEsAdministrador}) => {
           <SeccióPobles />
           <SeccióNecessitats />
           <SeccióTipus />
+          { esAdministrador && <SeccióCodis />}
      </PanellSeccions>;
 };
 

imports/ui/BarraNav/PanellSeccions/PanellSeccions.jsx

@@ -16,22 +16,27 @@ 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 SeccióCodis = () => <BotóSecció
+     titol="Codis"
+     linkto="codis"
 />;
 
 export const PanellSeccions = ({children}) => {
@@ -40,9 +45,10 @@ export const PanellSeccions = ({children}) => {
           border: `1px solid #cccc`,
           padding: `.5rem`,
           borderRadius: `.5rem`,
-          backgroundColor: `lightslategray`
+          backgroundColor: `lightslategray`,
+          flexWrap: `wrap`,
+          justifyContent: `space-around`
      }}>{children}</div>
      <br />
      </>;
 };
-

imports/ui/Codis.jsx

@@ -0,0 +1,250 @@
+import React, { Suspense, useEffect, useState, useRef, lazy } from 'react';
+import { Meteor } from 'meteor/meteor';;
+import { NecessitatsCollection } from '/imports/api/necessitats.js';
+import { PoblesCollection } from '../api/pobles';
+import { TipusCollection } from '../api/tipus';
+import { useSubscribe, useTracker, useFind } from 'meteor/react-meteor-data/suspense';
+import { Roles } from 'meteor/roles';
+// import { useUserId } from 'meteor/react-meteor-accounts';
+import Select from 'react-select';
+
+import CreatableSelect from 'react-select/creatable';
+import AsyncCreatableSelect from 'react-select/async-creatable';
+import { BarraNav } from "./BarraNav/BarraNav";
+
+
+
+
+export const Codis = () => {
+          
+     // const [permes, setPermes] = useState(false);
+     const [esEditor, setEsEditor] = useState(false);
+     const userId = Meteor.userId();
+     
+     useEffect(() => {
+          (async () => {
+               const comprovaAdmin = await Roles.userIsInRoleAsync(userId, ["admin"]);
+               setEsEditor(comprovaAdmin);
+          })();
+     }, []);
+
+     // console.log("isAdmin: ", isAdmin) ;
+     
+     let ambitSeleccionat = null;
+
+     useSubscribe('necessitats');
+     const necessitats = useTracker("necessitats", () => NecessitatsCollection.find().fetchAsync());
+
+     useSubscribe('pobles');
+     const pobles = useTracker("pobles", () => PoblesCollection.find().fetchAsync());
+     const ambits = pobles?.map(p => p?.ambitAssociat);
+
+     // console.log("ambits: ", ambits);
+
+     // useSubscribe('tipus');
+     // const ambits = useTracker("ambits", () => Collection.find().fetchAsync());
+
+     // console.log("tipus: ", tipus);
+     // console.log("necessitats: ", necessitats);
+     
+     // console.log("tipusSeleccionat: ", tipusSeleccionat);
+
+
+     // const filterAmbit = (inputValue) => {
+     //      return ambits.filter((i) =>
+     //           i.toLowerCase().includes(inputValue.toLowerCase())
+     //      );
+     // };
+
+     const SelectorDeRol = ({ambitSeleccionat}) => {
+          return <>
+               <label htmlFor="selRol">Rol: </label>
+               <Select
+                    key={Math.random()}
+                    name="selRol"
+                    // filterOption={(opts) => necessitats.find(nec => nec.tipus === tipusSeleccionat._id)}
+                    options={
+                         (ambitSeleccionat == "GENERAL")
+                         ? [
+                              {
+                                   value: "admin",
+                                   label: "administrador"
+                              },
+                              {
+                                   value: "usuari",
+                                   label: "usuari"
+                              }
+                         ]
+
+                         : [
+                              {
+                                   value: "monitor_de_poble",
+                                   label: "monitor_de_poble"
+                              },
+                              {
+                                   value: "encarregat_de_tasques",
+                                   label: "encarregat_de_tasques"
+                              },
+                              {
+                                   value: "voluntari_de_poble",
+                                   label: "voluntari_de_poble"
+                              }
+                         ]
+                    }
+               />
+          </>;
+     }
+
+     const QuadreInfo_Tipus = () => {
+          
+          return <div style={{
+               display: `inline-block`,
+               border: `1px solid #6666`,
+               padding: `.5rem`,
+               borderRadius: `.3em`,
+               backgroundColor: `lightcyan`
+          }}>
+          
+          {ambitSeleccionat && <h1>{ambitSeleccionat}</h1>}
+          <h1>Codis</h1>
+
+          <p>Tria el rol que adquirirà qui utilitze el codi.</p>
+
+          <form
+               action={d => {
+                    // if (d.get('selTipus'))
+                    try {
+                         Meteor.callAsync('editaOAfigNecessitat', {
+                              ...tipusSeleccionat || [],
+                              titol: d.get('titol'),
+                              tipus: d.get('selTipus') || "",
+                              poble: d.get('selPoble')
+                         })
+                              .then(() => setAmbitSeleccionat(null))
+                              .catch(err => console.error(err))
+                         ;
+                    } catch (err) {
+                         alert(err);
+                         console.error(err);
+                    }
+               }}
+          >
+               <label htmlFor="selAmbit">Àmbit: </label>
+               {/* Si
+                    l'usuari és ADMINISTRADOR o té permisos de responsabilitat, podrà crear nous Tipus al CREAR o a l'EDITAR
+               si no
+                    tansols podrà assignar a un tipus predefinit o al de ALTRES
+               */}
+
+               <Select
+                    name="selAmbit"
+                    // formatCreateLabel={(inputValue) => "Crear nou tipus..."}
+                    // filterOption={filterAmbit}
+                    options={
+                         [...
+                              ambits
+                              .map((v,i) => ({
+                                   value: v,
+                                   label: v
+                              }))
+                              .sort((a,b) => a.label.toLowerCase() > b.label.toLowerCase()),
+                              {
+                                   value: "GENERAL",
+                                   label: "GENERAL"
+                              }
+                         ]
+                    }
+                    // onCreateOption={(inputValue) => Meteor.callAsync('afigT', {titol: inputValue})}
+                    isSearchable
+                    // loadOptions={tipus.map((v,i) => ({value: v, label: v.titol}))}
+                    onChange={ev => {
+                         ambitSeleccionat = ev.value;
+                         console.log("ambitSeleccionat: ", ambitSeleccionat);
+
+                    }}
+               />
+               
+               {/* <select name="selTipus">
+                    <option value="moble">Moble</option>
+                    <option value="maquinari">Maquinari</option>
+                    <option value="menjar">Menjar i beguda</option>
+                    <option value="infantil">Infantils</option>
+                    <option value="higiene">Higiene</option>
+               </select> */}
+
+               <br />
+
+               <SelectorDeRol {... {ambitSeleccionat}} />
+
+               <br />
+
+               <label htmlFor="titol">Títol: </label>
+               <input type="text" name='titol' />
+
+               <br /><br />
+
+               <label htmlFor="poble">Poble: </label>
+
+               <CreatableSelect name="selPoble" options={pobles.map((v,i) => ({value: v._id, label: v.nomPoble})) } />
+               {/* <select name="selPoble">
+                    {
+                         pobles.map((v,i) => <option key={`optPob${i}`}>{v.nomPoble}</option>)
+                    }
+               </select> */}
+               
+               <br />
+                              
+               <input type='submit' value="Enviar" />
+
+               {ambitSeleccionat && esEditor && <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));
+                         setNecessitatSeleccionada(null);
+                    }
+               }}>Elimina</button>}
+          </form>
+          </div>;
+     };
+
+          
+     return <Suspense fallback={<>Carregant...</>} >
+          
+          <QuadreInfo_Tipus />
+
+          <br /><br />
+
+          {/* <AsyncCreatableSelect
+               cacheOptions
+               defaultOptions={tipus.map((v,i) => ({value: v, label: v.titol})) }
+               loadOptions={tipus.map((v,i) => ({value: v, label: v.titol}))}
+          /> */}
+          
+          {/* <SelectSearch options={options} value="sv" name="language" placeholder="Choose your language" /> */}
+
+          
+          <ul style={{
+               display: `flex`,
+               flexWrap: `wrap`,
+               justifyContent: `space-evenly`,
+               rowGap: `.3em`,
+               alignContent: `space-around`
+          }}>{
+          ambits
+               .sort((a,b) => a.toLowerCase() > b.toLowerCase())
+               .map(amb => <li
+                    key={amb}
+                    style={{
+                         display: `block`,
+                         border: `1px solid #6666`,
+                         borderRadius: `.4em`,
+                         padding: `4px`,
+                         listStyle: `none`,
+                         backgroundColor: `${'lightgreen' || 'lightcoral'}`
+                    }}
+               >
+                         {amb}{esEditor && <button onClick={() => {setTipusSeleccionat(titol)}}>Edita</button>}
+               </li>)
+          }</ul>
+     </Suspense>;
+};

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'),
+                              titol: d.get('taTitol'),
-                              tipus: d.get('selTipus') || "",
+                              tipus: tipusSeleccionat,
-                              poble: d.get('selPoble')
+                              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="inContacte" id="inContacte" placeholder='Nom' 
-                    <input required type="text" name="inTelefon" id="inTelefon" placeholder='Telèfon' /> <br />
+                         defaultValue={ necessitatSeleccionada ? necessitatSeleccionada.contacte?.nom : ""}
-                    <input required type="text" name="inEMail" id="inEMail" placeholder='Correu electrònic' /> <br />
+                    /> <br />
-                    <input type="text" name="inAdreça" id="inAdreça" placeholder='Adreça' /> <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 />

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,14 +6,215 @@ 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';
 
 
+const QuadreInfo_Poble = ({esEditor, pobleSeleccionat, setPobleSeleccionat}) => {
           
+     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"
+                    key={`inNom_${pobleSeleccionat._id}`}
+                    type="text"
+                    defaultValue={ pobleSeleccionat ? pobleSeleccionat.nomPoble : ""}
+                    // value={ 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" key={`inAmbit_${pobleSeleccionat._id}`} 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>;
+};
+
+const BotoPobleAmbIndicadors = ({pob, pobleSeleccionat, setPobleSeleccionat, esEditor}) => {
+     // let pob = pobleSeleccionat;
+     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>;
+}
 
 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,54 +232,20 @@ export const Pobles = () => {
           }, []);
      // })();
 
-     const QuadreInfo_Poble = () => {
      
-          return <div style={{
-               display: `inline-block`,
-               border: `1px solid #6666`,
-               padding: `.5rem`,
-               borderRadius: `.3em`,
-               backgroundColor: `lightcyan`
-          }}>
      
-               {pobleSeleccionat && <h2>{pobleSeleccionat._id}</h2>}
+     
+     
+
+     // const Indicador = ({valor, ambit, }) => {
+
+     // };
+     
+     return <>
+          
           <h1>Pobles</h1>
 
-               <form
+          { esEditor && (pobleSeleccionat || creantPoble) && <QuadreInfo_Poble {... {pobleSeleccionat, setPobleSeleccionat, esEditor} } /> }
-                    action={d => {
-                         try {
-                              Meteor.callAsync('editaOAfigPoble',
-                              {
-                                   ...pobleSeleccionat || [],
-                                   nomPoble: d.get('nomPoble'),
-                                   cp: d.get('cp') || "",
-                                   comarca: d.get('comarca') || "",
-                              }).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 : ""}/><br />
-                    <label htmlFor="comarca">Comarca: </label><input name="comarca" type="text" /><br />
-                    <label htmlFor="cp">Codi Postal: </label><input name="cp" type="text" /><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...</>} >
-
-          { esEditor && <QuadreInfo_Poble /> }
           
           <ul style={{
                display: `flex`,
@@ -89,18 +256,15 @@ export const Pobles = () => {
           }}>{
           pobles
                .sort((a,b) => a.nomPoble?.toLowerCase() > b.nomPoble?.toLowerCase())
-               .map(pob => <li
+               .map(pob => {
-                    key={`pob_${pob._id}`}
+                    return <BotoPobleAmbIndicadors {... {pobleSeleccionat, setPobleSeleccionat, pob, esEditor, key: `pob_${pob.ambitAssociat}`} } />
-                    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>
-     </Suspense>;
+
+          {esEditor && <button
+               onPointerUp={ev => {
+                    setCreantPoble(!creantPoble);
+               }}
+          >+</button>}
+     </>;
 };

imports/ui/Usuaris.jsx

@@ -7,32 +7,392 @@ import { Roles } from 'meteor/roles';
 // import { useUserId } from 'meteor/react-meteor-accounts';
 
 
-export const Usuaris = () => {
+// import { Meteor } from 'meteor/meteor';
+// import React, {useState, useEffect, Suspense} from 'react';
+// import { useTracker, useFind } from 'meteor/react-meteor-data/suspense';
 
-     const [usrSeleccionat, setUsrSeleccionat] = useState(null);
+// import { FilesCol } from '/imports/api/files.js';
-     useSubscribe('pobles');
+import { useNavigate, Link } from 'react-router-dom';
-     const pobles = useTracker("pobles", () => PoblesCollection.find().fetchAsync());
 
-     const [esEditor, setEsEditor] = useState(false);
+// import { Roles } from 'meteor/roles';
-     const userId = Meteor.userId();
+// import { useUserContext } from '/imports/api/contexts/AppContext';
+// import { groupBy } from 'lodash';
+
+//import Radium from 'radium';
+
+
+// const IndicadorMissatges = ({notif}) => {
+//   return <span style={{
+//     position: `relative`
+//   }}>
+//     {notif && <span className='fas fa-solid fa-envelope' />}
+//     <span style={{
+//       borderRadius: `50%`,
+//       background: notif ? `red` : ``,
+//       position: `absolute`,
+//       width: `.4em`,
+//       aspectRatio: `1 / 1`
+//     }}/>
+//   </span>;
+// };
+
+const U = ({u, esAdministrador, setUsrSeleccionat}) => {
+
+     const [adm, setAdm] = useState(false);
+     const [mon, setMon] = useState(false);
+     const [enc, setEnc] = useState(false);
+     const [vol, setVol] = useState(false);
 
-     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(() => {
      (async () => {
-                    const comprovaAdmin = await Roles.userIsInRoleAsync(userId, ["admin"]);
+        const esAdmin = await Roles.userIsInRoleAsync(u._id, ["admin"]);
-                    setEsEditor(comprovaAdmin);
+        setAdm(esAdmin);
+        const esMonit = await Roles.userIsInRoleAsync(u._id, ["monitor_de_poble"], {anyScope: true});
+        setMon(esMonit);
+        const esEncar = await Roles.userIsInRoleAsync(u._id, ["encarregat_de_tasques"], {anyScope: true});
+        setEnc(esEncar);
+        const esVolun = await Roles.userIsInRoleAsync(u._id, ["voluntari_de_poble"], {anyScope: true});
+        setVol(esVolun);
+     //    setEsAdministrador(comprovaAdmin);
      })();
 
-          }, []);
-     // })();
 
-     const QuadreInfo_Usuari = () => {
+     // console.log("adm: ", adm);
+     // console.log("mon: ", mon);
+     // console.log("enc: ", enc);
+     // console.log("vol: ", vol);
+
+
+  // const [esAdministrador, setEsAdministrador] = useState(false);
+
+//   const u = useTracker("user", async () => await Meteor.userAsync());
+//   const userId = Meteor.userId();
+
+
+  // useEffect(() => {
+  //   (async () => {
+  //       const comprovaAdmin = await Roles.userIsInRoleAsync(userId, ["admin"]);
+  //       setEsAdministrador(comprovaAdmin);
+  //   })();
+  // }, [Meteor.userId()]);
+
+  // const u = useUserContext();
+
+
+  // console.log("UUU: ", u);
+
+  const navigate = useNavigate();
+  // const files = useTracker(() => {
+  //   const filesHandle = Meteor.subscribe('files.avatar');
+  // // const docsReadyYet = filesHandle.ready();
+  //   const files = FilesCol?.find({"meta.userId": Meteor.userId()}, {sort: {name: 1}}).fetch(); // Meteor.userId() ?? "nop"
+  
+  //   return files;
+  // });
+
+// const uname = useTracker(() => Meteor.user({ fields: { 'username': 1 } })?.username );
+  
+//   const [mostraMenu, setMostraMenu] = useState(false);
+
+  //const avatarLink = u.avatarLink;
+
+  // alert("avLnk: ", u.profile.avatarLink);
+  
+  return <Suspense fallback="Carregant...">
+    <div
+     key={`u_${u._id}`}
+      style={{
+        // color: `lightblue`,
+        
+        top: `1em`,
+        // right: `1em`,
+        left: `1em`,
+        cursor: `pointer`,
+        background: `yellow`,
+        border: `lightblue 3px solid`,
+        //padding: `.15em`,
+        borderRadius: `50%`,
+        fontWeight: `bold`,
+        display: `inline-block`,
+     //    padding: `0px .9rem`
+        padding: `0px 1.2rem`,
+        position: `relative`,
+        height: `69%`
+      }}
+     //  onMouseEnter={ev => {
+     //    setMostraMenu(true);
+     //  }}
+    
+      // title="Logout"
+
+      onClick={ev => {
+        ev.stopPropagation();
+        ev.preventDefault();
+
+        // console.log("u: ", u);
+
+        navigate(`/${u.username}`);
+
+      }}
+    >
+     <div style={{
+          position: `absolute`
+     }}>
+          { (u && adm) && <div style={{
+               color: `red`,
+               fontSize: `xx-small`,
+               // textAlign: `right`
+          }}>ADMIN</div> }
+          { (u && mon) && <div style={{
+               color: `red`,
+               fontSize: `xx-small`,
+               // textAlign: `right`
+          }}>mon</div> }
+          { (u && enc) && <div style={{
+               color: `red`,
+               fontSize: `xx-small`,
+               // textAlign: `right`
+          }}>enc</div> }
+          { (u && vol) && <div style={{
+               color: `red`,
+               fontSize: `xx-small`,
+               // textAlign: `right`
+          }}>vol</div> }
+      </div>
+      <img
+        style={{
+          width: `3em`,
+          height: `3em`,
+          borderRadius: `50%`,
+          overflow: `hidden`,
+          verticalAlign: `middle`,
+          margin: `.3em`,
+          border: `solid 4px whitesmoke`,
+          display: `block`
+        }}
+        src={u?.profile?.avatarLink}
+      />
+
+      <span style={{
+          verticalAlign: `middle`,
+          textAlign: `center`,
+          display: `block`,
+      }}>{u?.username}</span>
+
+      <span
+        style={{
+          verticalAlign: `middle`,
+          margin: `0.3em 0.3em 0.3em auto`,
+          padding: `.2em`,
+          // border: `2px solid grey`,
+          color: `grey`,
+          // borderRadius: `.3em`
+        }}
+        onClick={ev => {
+          ev.preventDefault();
+          ev.stopPropagation();
+
+          // alert("Click en missatges");
+        }}
+      >
+          {<button onClick={() => {setUsrSeleccionat(u)}}>Edita</button>}
+        {/* <IndicadorMissatges notif={false} /> */}
+      </span>
+    </div>
+    {
+     //  mostraMenu &&
+     //  <div style={{
+     //      position: `absolute`,
+     //      background: `white`,
+     //      // right: `0`,
+     //      left: 0,
+     //      top: `5em`,
+     //      padding: `.4em .5em`,
+     //      border: `1px   #aaa`,
+     //      cursor: `pointer`,
+     //      zIndex: `200`
+     //    }}
+     // //    onMouseLeave={ev => {
+     // //      setMostraMenu(false);p
+     // //    }}
+     //  >
+     //    {/* <Link to="/c/config"> */}
+     //      <div className="menuOp" style={{
+     //          padding: `.2em`
+     //        }}
+     //        onClick={ev => {
+     //          //setEditaPerfil(true);
+     //          ev.stopPropagation();
+     //          ev.preventDefault();
+              
+     //          navigate(`/c/config`);
+
+     //        }}
+     //      >Configuración</div>
+     //    {/* </Link> */}
+        
+     //    <div className="menuOp" style={{
+     //      padding: `.2em`
+     //    }}
+     //    onClick={() => {
+     //      Meteor.logout(err => {
+     //        err && alert(`Problema: ${err}`);
+     //      });
+     //      navigate(`/`);
+     //    }}
+     //    >Cierra la sesión</div>
+     //  </div>
+    }
+    <br /><br />
+  </Suspense>;
+};
+
+
+
+const AssignadorDeRols = ({pobles, esEditor, rols, usrSeleccionat, ambitsUSel}) => {
+     const [creantRol, setCreantRol] = useState(false);
+     const [ambitGeneral, setAmbitGeneral] = 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 => {
+                    if (ambitGeneral) {
+                         Meteor.callAsync('assignaRol', usrSeleccionat._id, d.get('selRol'));
+                    } else {
+                         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`,
@@ -73,35 +433,120 @@ 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);
+
+               // console.log("ambitsUSel: ", ambitsUSel);
+          })();
+          
+     }, []);
+
+     const ambitsUSel = Roles.getScopesForUser(usrSeleccionat?._id);
+     // setAmbitsUSel(ambits);
+
+
+     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`,
                flexWrap: `wrap`,
                justifyContent: `space-evenly`,
                rowGap: `.3em`,
-               alignContent: `space-around`
+               alignContent: `space-around`,
+               scale: `.7`
           }}>{
           usuaris
                .sort((a,b) => a.username?.toLowerCase() > b.username?.toLowerCase())
                .map(usr => <li
                     key={`usr_${usr._id}`}
                     style={{
-                         display: `block`,
+                         // display: `block`,
-                         border: `1px solid #6666`,
+                         // border: `1px solid #6666`,
-                         borderRadius: `.4em`,
+                         // borderRadius: `50%`,
-                         padding: `4px`,
+                         // padding: `4px`,
                          listStyle: `none`,
-                         backgroundColor: `${'lightgreen' || 'lightcoral'}`
+                         // backgroundColor: `${'lightgreen' || 'lightcoral'}`
                     }}
                >
-                         {usr.username}{esEditor && <button onClick={() => {setUsrSeleccionat(usr)}}>Edita</button>}</li>)
+                         {/* {usr.username}{esEditor && <button onClick={() => {setUsrSeleccionat(usr)}}>Edita</button>} */}
+                         <U u={usr} esAdministrador={usr._id === Meteor.userId() && esEditor} setUsrSeleccionat={setUsrSeleccionat} />
+               </li>)
           }</ul>
      </Suspense>;
 };

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 esAdmin = await Roles.userIsInRoleAsync(this.userId, "admin", null);
-    const userRoles = await Roles.getRolesForUserAsync(Meteor.userId());
+    const userRoles = await Roles.getRolesForUserAsync(this.userId);
 
     console.log("userRoles: ", userRoles);
+    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);
-    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, ROLS_GLOBALS.USUARI], ROLS_GLOBALS.ADMINISTRADOR);
     
   } catch (err) {
     console.error(err.message);
   }
 
   // Publish user's own roles
-Meteor.publish(null, function () {
+Meteor.publish(null, async function () {
-  if (this.userId) {
+  // if (await Roles.userIsInRoleAsync(this.userId, "admin")) {
-    return Meteor.roleAssignment.find({ "user._id": this.userId });
+    return Meteor.roleAssignment.find();
-  }
+  // }
-  this.ready();
+
+  // 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({
+    '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 {