Codis en alpha

.meteor/packages

@@ -6,7 +6,7 @@
 
 meteor-base@1.5.2             # Packages every Meteor app needs to have
 mobile-experience@1.1.2       # Packages for a great mobile UX
-mongo@2.0.3                   # The database Meteor supports right now
+mongo@2.1.0                   # The database Meteor supports right now
 reactive-var@1.0.13            # Reactive variable for tracker
 
 standard-minifier-css@1.9.3   # CSS minifier run for production mode
@@ -19,6 +19,6 @@ hot-module-replacement@0.5.4  # Update client in development without reloading t
 
 static-html@1.4.0             # Define static page content in .html files
 react-meteor-data       # React higher-order component for reactively tracking Meteor data
-roles@1.0.0
+roles@1.0.1
 accounts-password@3.0.3
 react-meteor-accounts

.meteor/release

@@ -1 +1 @@
-METEOR@3.1
+METEOR@3.1.1

.meteor/versions

@@ -1,8 +1,8 @@
-accounts-base@3.0.3
+accounts-base@3.0.4
 accounts-password@3.0.3
-allow-deny@2.0.0
+allow-deny@2.1.0
 autoupdate@2.0.0
-babel-compiler@7.11.2
+babel-compiler@7.11.3
 babel-runtime@1.5.2
 base64@1.0.13
 binary-heap@1.0.12
@@ -12,10 +12,10 @@ callback-hook@1.6.0
 check@1.4.4
 core-runtime@1.0.0
 ddp@1.4.2
-ddp-client@3.0.3
+ddp-client@3.1.0
 ddp-common@1.4.4
 ddp-rate-limiter@1.2.2
-ddp-server@3.0.3
+ddp-server@3.1.0
 diff-sequence@1.1.3
 dynamic-import@0.7.4
 ecmascript@0.16.10
@@ -35,7 +35,7 @@ inter-process-messaging@0.1.2
 launch-screen@2.0.1
 localstorage@1.2.1
 logging@1.3.5
-meteor@2.0.2
+meteor@2.1.0
 meteor-base@1.5.2
 minifier-css@2.0.0
 minifier-js@3.0.1
@@ -46,26 +46,26 @@ modern-browsers@0.1.11
 modules@0.20.3
 modules-runtime@0.13.2
 modules-runtime-hot@0.14.3
-mongo@2.0.3
+mongo@2.1.0
 mongo-decimal@0.2.0
 mongo-dev-server@1.1.1
 mongo-id@1.0.9
-npm-mongo@6.10.0
+npm-mongo@6.10.2
 ordered-dict@1.2.0
 promise@1.0.0
 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
-roles@1.0.0
+roles@1.0.1
 routepolicy@1.1.2
 sha@1.0.10
 shell-server@0.6.1
-socket-stream-client@0.5.3
+socket-stream-client@0.6.0
 standard-minifier-css@1.9.3
 standard-minifier-js@3.0.0
 static-html@1.4.0
@@ -75,4 +75,3 @@ typescript@5.6.3
 url@1.3.5
 webapp@2.0.4
 webapp-hashing@1.1.2
-zodern:types@1.0.13

PROBLEMES.MD

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

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/api/codis.js

@@ -0,0 +1,3 @@
+import { Mongo } from 'meteor/mongo';
+
+export const CodisCollection = new Mongo.Collection('codis');

imports/roles.js

@@ -13,4 +13,13 @@ export const ROLS_DE_POBLE = {
 }; // as const;
 
 // export type TeamRolesKeys = keyof typeof TEAM_ROLES;
-// export type TeamRolesValues = (typeof TEAM_ROLES)[TeamRolesKeys];
+// 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,12 +5,14 @@ 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';
 
 import { UserStat } from './BarraNav/UserStat';
 import { Usuaris } from './Usuaris';
+import { Codis } from './Codis';
 
 const Loguejat = lazy(async () => await import('/imports/ui/Loguejat.jsx'));
 
@@ -22,6 +24,8 @@ export const App = () => {
 
   const [esAdministrador, setEsAdministrador] = useState(false);
 
+  // const [pobleSeleccionat, setPobleSeleccionat] = useState(null);
+
   // const u = useTracker("user", async () => await Meteor.userAsync());
 
 
@@ -45,11 +49,13 @@ 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 /> } />
+      {esAdministrador && <Route path="codis" element={ <Codis /> } />}
     </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,547 @@
+import React, { Suspense, useEffect, useState } from 'react';
+import { Meteor } from 'meteor/meteor';
+import { Random } from 'meteor/random';
+import { NecessitatsCollection } from '/imports/api/necessitats.js';
+import { PoblesCollection } from '../api/pobles';
+import { CodisCollection } from '../api/codis';
+// import { TipusCollection } from '../api/tipus';
+import { useSubscribe, useTracker, useFind } from 'meteor/react-meteor-data/suspense';
+import { Roles } from 'meteor/roles';
+// import { useNavigate } from 'react-router-dom';
+
+// import { useUserId } from 'meteor/react-meteor-accounts';
+import Select from 'react-select';
+
+function generaCodi() {
+     return Random.id().slice(0, 5).toUpperCase();
+}
+
+export const Codis = () => {
+          
+     const [esEditor, setEsEditor] = useState(false);
+     const userId = Meteor.userId();
+
+     const [codiSeleccionat, setCodiSeleccionat] = useState(null);
+     
+     useEffect(() => {
+          (async () => {
+               const comprovaAdmin = await Roles.userIsInRoleAsync(userId, ["admin"]);
+               setEsEditor(comprovaAdmin);
+          })();
+     }, []);
+
+     const [confecCodObj, setConfecCodObj] = useState({
+          codi: generaCodi(),
+          ambit: null,
+          rol: null,
+          absCond: "abs",
+          absActiu: false,
+          condIni: null,
+          condFi: null
+     });
+
+     useSubscribe('codis');
+     const codis = useTracker("codis", () => CodisCollection.find().fetchAsync());
+
+     useSubscribe('pobles');
+     const pobles = useTracker("pobles", () => PoblesCollection.find().fetchAsync());
+     const ambits = pobles?.map(p => p?.ambitAssociat);
+
+     const codiDoc = useTracker("valsFormDoc", () => CodisCollection.findOneAsync(codiSeleccionat?._id));
+
+
+     const SelectorDeRol = () => {
+
+          return <>
+               <label htmlFor="selRol">Rol: </label>
+               <Select
+                    required
+                    key={Math.random()}
+                    name="selRol"
+
+                    defaultValue={
+                         codiSeleccionat
+                         ? {
+                              label: codiSeleccionat?.rol,
+                              value: codiSeleccionat?.rol
+                         }
+
+                         : confecCodObj?.rol || null
+
+                    }
+
+                    onChange={v => {
+                         // console.log("v: ", v);
+
+                         // console.log("cCO abans: ", confecCodObj);
+                         setConfecCodObj({
+                              ...confecCodObj,
+                              rol: v
+                         });
+
+                         // console.log("cCO despres: ", confecCodObj);
+                    }}
+                    
+                    options={
+                         (confecCodObj?.ambit?.value === "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"
+                              }
+                         ]
+                    }
+               />
+          </>;
+     }
+
+     function handleToggleAbsActiu(ev) {
+          ev.preventDefault();
+          ev.stopPropagation();
+
+          if (codiSeleccionat) {
+               Meteor.callAsync('modCodiDocToggleAbsActiu', codiSeleccionat);
+               setCodiSeleccionat({
+                    ...codiSeleccionat,
+                    absActiu: !codiSeleccionat.absActiu
+               });
+          } else {
+               setConfecCodObj({
+                    ...confecCodObj,
+                    absActiu: !confecCodObj.absActiu
+               });
+          }
+     }
+
+     function handleSetCondIni(v) {
+
+          console.log("h")
+          
+          Meteor.callAsync('modCodiDocSetCondIni', {
+               ...codiSeleccionat,
+               condIni: v.currentTarget.value
+          });
+
+          if (codiSeleccionat) {
+               setCodiSeleccionat({
+                    ...codiSeleccionat,
+                    condIni: v.currentTarget.value
+               });
+          } else {
+               setConfecCodObj({
+                    ...confecCodObj,
+                    condIni: v.currentTarget.value
+               });
+          }
+     }
+
+     function handleSetCondFi(v) {
+
+          Meteor.callAsync('modCodiDocSetCondFi', {
+               ...codiSeleccionat,
+               condFi: v.currentTarget.value
+          });
+
+          if (codiSeleccionat) {
+               setCodiSeleccionat({
+                    ...codiSeleccionat,
+                    condFi: v.currentTarget.value
+               });
+          } else {
+               setConfecCodObj({
+                    ...confecCodObj,
+                    condFi: v.currentTarget.value
+               });
+          }
+     }
+
+     const QuadreInfo_Codis = () => {
+
+          // const navigate = useNavigate();
+
+
+          const [actCond, setActCond] = useState(true);
+          // const [codiGenerat, setCodiGenerat] = useState(generaCodi());
+
+          const [absCond, setAbsCond] = useState('cond');
+
+          const codSelAbsActChecked = codiDoc ? {checked: codiDoc.absActiu} : {defaultChecked: confecCodObj.absActiu};
+
+          // console.log("cS: ", codiSeleccionat);
+          // console.log("cCO: ", confecCodObj);
+          
+          return <div style={{
+               display: `inline-block`,
+               border: `1px solid #6666`,
+               padding: `.5rem`,
+               borderRadius: `.3em`,
+               backgroundColor: `lightcyan`,
+               outline: `${codiSeleccionat?._id ? '5px solid black' : 'none'}`
+          }}>
+          
+          <h1>Codis</h1>
+
+               <div
+                    style={{
+                         fontWeight: `bolder`,
+                         textAlign: `center`,
+                         transform: `scale(2)`
+                    }}
+                    >
+                    <span
+                         style={{
+                              backgroundColor: `white`,
+                              border: `3px solid black`,
+                              padding: `0 .2em`,
+                              margin: `1rem auto`,
+                         }}
+                    >{codiSeleccionat ? codiSeleccionat?.codi : confecCodObj.codi}</span>
+               </div>
+               <br />
+
+          <p>Tria el rol que adquirirà qui utilitze el codi anterior una vegada activat</p>
+
+          <form
+               action={d => {
+                    try {
+                         Meteor.callAsync('editaOAfigCodi', {
+                              ...confecCodObj || [],
+                              codi: confecCodObj.codi,
+                              ambit: d.get('selAmbit') || "",
+                              rol: d.get('selRol'),
+                              
+                              absCond: d.get('absCond'),
+                              absActiu: d.get('absActiu'),
+                              condIni: d.get('condIni'),
+                              condFi: d.get('condFi')
+                    
+                         })
+                              .then(() => setConfecCodObj({
+                                   codi: generaCodi(),
+                                   ambit: null,
+                                   rol: null,
+                                   absCond: "abs",
+                                   absActiu: false,
+                                   condIni: null,
+                                   condFi: null
+                              }))
+                              .catch(err => console.error(err))
+                         ;
+                    } catch (err) {
+                         alert(err);
+                         console.error(err);
+                    }
+               }}
+          >
+               <label htmlFor="selAmbit">Àmbit: </label>
+
+               <Select
+                    required
+                    name="selAmbit"
+               
+                    defaultValue={codiDoc && {
+                         label: codiDoc?.ambit,
+                         value: codiDoc?.ambit
+                    } || confecCodObj.ambit}
+                    options={
+                         [...
+                              ambits
+                              .map((v,i) => ({
+                                   value: v,
+                                   label: v
+                              }))
+                              .sort((a,b) => a.label.toLowerCase() > b.label.toLowerCase()),
+                              {
+                                   value: "GENERAL",
+                                   label: "GENERAL"
+                              }
+                         ]
+                    }
+                    isSearchable
+                    onChange={amb => {
+
+                         setConfecCodObj({
+                              ...confecCodObj,
+                              ambit: amb
+                         });
+
+                    }}
+               />
+
+               <br />
+
+               <SelectorDeRol />
+               
+
+               <br /><br />
+
+               <p>Periode de validesa: </p>
+               
+               <div style={{
+                    border: `1px solid #cccc`,
+                    borderRadius: `.4em`,
+                    margin: `1rem`,
+                    padding: `.6rem`,
+                    backgroundColor: `lightslategray`
+               }}>
+                    {/* <p>TEMPS REAL:</p> */}
+                    <label htmlFor="inActAbs">
+                         <input
+                              type="radio"
+                              name='absCond'
+                              value="abs"
+                              id="inActAbs"
+
+                              checked={
+                                   codiSeleccionat
+                                   &&
+                                   codiSeleccionat.absCond === 'abs'
+                                   
+                                   ||
+                                   
+                                   confecCodObj?.absCond === 'abs'
+                                   &&
+                                   !codiSeleccionat
+                              }
+
+                              onChange={(ev) => {
+                                   if (codiSeleccionat) {
+                                        Meteor.callAsync('modActivacioAbsCond', codiSeleccionat, 'abs');
+                                        setCodiSeleccionat({
+                                             ...codiSeleccionat,
+                                             absCond: 'abs'
+                                        });
+                                   } else {
+                                        setConfecCodObj({
+                                             ...confecCodObj,
+                                             absCond: 'abs'
+                                        })
+                                   }
+                              }}
+                         />
+                         <span>Activació absoluta</span>
+                    </label>
+                    
+                    <br />
+
+                    <label htmlFor="inActCond">
+                         <input
+                              type="radio"
+                              name='absCond'
+                              value="cond"
+                              id="inActCond"
+                              
+                              checked={
+                                   codiSeleccionat
+                                   &&
+                                   codiSeleccionat.absCond === 'cond'
+                                   
+                                   ||
+                                   
+                                   confecCodObj?.absCond === 'cond'
+                                   &&
+                                   !codiSeleccionat
+                              }
+
+                              onChange={(ev) => {
+                                   // console.log("ev: ", ev);
+
+                                   if (codiSeleccionat) {
+                                        Meteor.callAsync('modActivacioAbsCond', codiSeleccionat, 'cond');
+                                        setCodiSeleccionat({
+                                             ...codiSeleccionat,
+                                             absCond: 'cond'
+                                        });
+                                   } else {
+                                        setConfecCodObj({
+                                             ...confecCodObj,
+                                             absCond: 'cond'
+                                        })
+                                   }
+
+                              }}
+                         />
+                         <span>Activació condicionada</span>
+                    </label>
+
+                    <br />
+                    <br />
+
+                    <div style={{
+                         border: `1px solid #6666`,
+                         padding: `0 1rem`,
+                         borderRadius: `.5em`,
+                         backgroundColor: `#fff2`
+                    }}>
+                    {
+                         (codiSeleccionat
+                         &&
+                         codiSeleccionat?.absCond === 'abs'
+                         
+                         ||
+
+                         confecCodObj?.absCond === 'abs'
+                         )
+                         &&
+                         codiSeleccionat?.absCond !== 'cond'
+                         &&
+
+                         <>
+                              <label htmlFor="act_status">Actiu</label>
+                              <input
+                                   type="checkbox"
+                                   name="absActiu"
+                                   id="absActiu"
+                                   {...codSelAbsActChecked}
+                                   onChange={ev => {
+                                        handleToggleAbsActiu(ev);
+                                   }}
+                              />
+                         </>
+                    }
+                    {
+                         (codiSeleccionat
+                         &&
+                         codiSeleccionat.absCond === 'cond'
+                         
+                         ||
+
+                         confecCodObj?.absCond === 'cond'
+                         )
+                         &&
+                         codiSeleccionat?.absCond !== 'abs'
+                         &&
+
+                         <>
+                              <p
+                                   style={{
+                                        color: `red`
+                                   }}
+                              >ATENCIÓ al format! <b>(mm/dd/aaaa)</b></p>
+
+                              Des de: <input
+                                   required={confecCodObj.actCond === 'cond'}
+                                   type="date"
+                                   name="condIni"
+                                   onChange={v => {
+
+                                        // // console.log("dataIni: ", v.currentTarget.value);
+                                        // setConfecCodObj({
+                                        //      ...confecCodObj,
+                                        //      condIni: v.currentTarget.value
+                                        // })
+
+                                        handleSetCondIni(v);
+                                   }}
+                                   defaultValue={codiSeleccionat?.condIni || confecCodObj.condIni}
+                              />
+                              <br />
+                              Fins a: <input
+                                   required={confecCodObj.actCond === 'cond'}
+                                   type="date"
+                                   name="condFi"
+                                   onChange={v => {
+                                        // console.log("dataFi: ", v.currentTarget.value);
+                                        // setConfecCodObj({
+                                        //      ...confecCodObj,
+                                        //      condFi: v.currentTarget.value
+                                        // })
+
+                                        handleSetCondFi(v);
+                                   }}
+                                   defaultValue={codiSeleccionat?.condFi || confecCodObj.condFi}
+                              />
+                              <br />
+                         </>
+                    }
+                    </div>
+               </div>
+               
+               {!codiSeleccionat && <input type='submit' value="Donar d'alta el codi" />}
+
+          </form>
+          </div>;
+     };
+
+     const
+          today = new Date(),
+          lastWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7)
+     ;
+
+     return <Suspense fallback={<>Carregant...</>} >
+          
+          <QuadreInfo_Codis />
+
+          <br /><br />
+
+          <ul style={{
+               display: `flex`,
+               flexWrap: `wrap`,
+               justifyContent: `space-evenly`,
+               rowGap: `.3em`,
+               alignContent: `space-around`
+          }}>{
+               codis
+
+               .map(cod => <li
+                    key={cod._id}
+                    style={{
+                         display: `block`,
+                         border: `1px solid #6666`,
+                         borderRadius: `.4em`,
+                         padding: `4px`,
+                         listStyle: `none`,
+                         backgroundColor: `${'lightgreen' || 'lightcoral'}`,
+                         position: `relative`,
+                         outline: `${codiSeleccionat?._id === cod._id ? '3px solid black' : 'none'}`
+                    }}
+                    onClick={ev => {
+                         ev.preventDefault();
+                         ev.stopPropagation();
+
+                         setCodiSeleccionat(codiSeleccionat?._id === cod._id ? null : cod);
+                    }}
+               >
+                    <span
+                         style={{
+                              width: `5px`,
+                              border: `1px solid #fffa`,
+                              position: `absolute`,
+                              borderRadius: `50%`,
+                              height: `5px`,
+                              right: `2px`,
+                              top: `2px`,
+                              boxShadow: `0 0 14px 5px ${cod.absActiu ? "lime" : "red"}`,
+                              backgroundColor: `${cod.absActiu ? "lime" : "red"}`
+                         }}
+                         onClick={ev => {
+                              handleToggleAbsActiu(ev);
+                         }}
+                    />
+                    <div>{cod.codi}</div>
+                    <div>{}</div>
+
+               </li>)
+          }</ul>
+
+     </Suspense>;
+};

imports/ui/Info.jsx

@@ -1,23 +1,23 @@
-import React from 'react';
+// import React from 'react';
-import { useFind, useSubscribe } from 'meteor/react-meteor-data';
+// import { useFind, useSubscribe } from 'meteor/react-meteor-data';
-import { LinksCollection } from '../api/links';
+// import { LinksCollection } from '../api/links';
 
-export const Info = () => {
+// export const Info = () => {
-  const isLoading = useSubscribe('links');
+//   const isLoading = useSubscribe('links');
-  const links = useFind(() => LinksCollection.find());
+//   const links = useFind(() => LinksCollection.find());
 
-  if(isLoading()) {
+//   if(isLoading()) {
-    return <div>Loading...</div>;
+//     return <div>Loading...</div>;
-  }
+//   }
 
-  return (
+//   return (
-    <div>
+//     <div>
-      <h2>Learn Meteor!</h2>
+//       <h2>Learn Meteor!</h2>
-      <ul>{links.map(
+//       <ul>{links.map(
-        link => <li key={link._id}>
+//         link => <li key={link._id}>
-          <a href={link.url} target="_blank">{link.title}</a>
+//           <a href={link.url} target="_blank">{link.title}</a>
-        </li>
+//         </li>
-      )}</ul>
+//       )}</ul>
-    </div>
+//     </div>
-  );
+//   );
-};
+// };

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,16 +39,23 @@ 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;
     
   };
 
   if (isLogin) {
-    return <form onSubmit={handleLogin}>
+    return <form
+      onSubmit={handleLogin}
+    >
       <label htmlFor="email">Correu electrònic o nom d'usuari: </label>
       <input id="email" type="email" required />
       <br />
@@ -60,24 +68,103 @@ export const Login = () => {
   }
 
   return (
-    <form onSubmit={handleRegistration}>
+    <form
+      action={async d => {
+
+        // let userId, codi;
+
+        try {
+
+          const username = d.get('username');
+          const email = d.get('email');
+          const tel = d.get('tel');
+          const password = d.get('password');
+          const password2 = d.get('password2');
+          const codi = d.get('codi');
+
+          if (password !== password2) {
+            console.error("Passwords do not match!");
+            return null;
+          }
+
+          console.log("username: ", username);
+          console.log("email: ", email);
+          console.log("tel: ", tel);
+          console.log("password: ", password);
+          console.log("password2: ", password2);
+          console.log("codi: ", codi);
+
+          const uObj = {
+            username,
+            email,
+            tel,
+            password,
+            password2
+          };
+
+          Meteor.callAsync('creaUsuariAmbCodi', uObj, codi);
+
+          // userId = await Accounts.createUser({
+          //   username,
+          //   email,
+          //   password
+          // });
+
+          
+        //   userId && await Roles.addUsersToRolesAsync(userId, [ROLS_GLOBALS.USUARI]);
+          
+        //   console.log("userId deL NOU USUARI: ", userId);
+
+          
+
+        } catch (err) {
+          alert(err);
+          console.error(err);
+        }
+
+        // try {
+        //   userId && await Meteor.callAsync('usaCodiAmbUsuari', userId, codi);
+        //   navigate('/');
+        // } catch (err2) {
+        //   alert(err2);
+        //   console.error(err2);
+        // }
+
+
+
+          // Meteor.callAsync('editaOAfigCodi', {
+          //       ...codiGenerat || [],
+          //       codi: codiGenerat,
+          //       ambit: d.get('selAmbit') || "",
+          //       rol: d.get('selRol'),
+          //       act_abs: d.get('activ_abs'),
+          //       act_cond: d.get('activ_cond'),
+          //       periode_validesa_ini: d.get('periode_validesa_ini'),
+          //       periode_validesa_fi: d.get('periode_validesa_fi')
+          // })
+          //       .then(() => setAmbitSeleccionat(null))
+          //       .catch(err => console.error(err))
+          // ;
+        
+      }}
+    >
       <label htmlFor="username">Nom d'usuari: </label>
-      <input id="username" type="text" required />
+      <input id="username" name="username" type="text" required />
       <br />
       <label htmlFor="email">Correu electrònic: </label>
-      <input id="email" type="email" required />
+      <input id="email" name="email" type="email" required />
       <br />
       <label htmlFor="password">Contrasenya: </label>
-      <input id="password" type="password" required />
+      <input id="password" name="password" type="password" required />
       <br />
       <label htmlFor="password2">Repeteix la contrasenya: </label>
-      <input id="password2" type="password" required />
+      <input id="password2" name="password2" type="password" required />
       <br />
       <label htmlFor="tel">Telèfon: </label>
-      <input id="tel" type="tel" required />
+      <input id="tel" name="tel" type="tel" required />
       <br />
       <label htmlFor="codi">Codi d'entrada (opcional): </label>
-      <input id="codi" type="text" />
+      <input id="codi" name="codi" type="text" style={{textAlign: `center`, fontWeight: `bolder`, fontSize: `1.1rem`}} onChange={ev => ev.target.value = (ev.currentTarget.value.length <= 5 && ev.currentTarget.value.toUpperCase()) || ev.currentTarget.value.slice(0, 5) } />
       <br />
       <button type="submit">Registrar</button>
       <button onClick={() => setIsLogin( true )}>Torna per accedir</button>

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 />
@@ -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,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 = () => {
+     
+     
+     
+     
+
+     // const Indicador = ({valor, ambit, }) => {
+
+     // };
+     
+     return <>
           
-          return <div style={{
+          <h1>Pobles</h1>
-               display: `inline-block`,
-               border: `1px solid #6666`,
-               padding: `.5rem`,
-               borderRadius: `.3em`,
-               backgroundColor: `lightcyan`
-          }}>
-               
-               {pobleSeleccionat && <h2>{pobleSeleccionat._id}</h2>}
-               <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,6 +7,441 @@ import { Roles } from 'meteor/roles';
 // import { useUserId } from 'meteor/react-meteor-accounts';
 
 
+// import { Meteor } from 'meteor/meteor';
+// import React, {useState, useEffect, Suspense} from 'react';
+// import { useTracker, useFind } from 'meteor/react-meteor-data/suspense';
+
+// import { FilesCol } from '/imports/api/files.js';
+import { useNavigate, Link } from 'react-router-dom';
+
+// import { Roles } from 'meteor/roles';
+// 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);
+
+     (async () => {
+        const esAdmin = await Roles.userIsInRoleAsync(u._id, ["admin"]);
+        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);
+     })();
+
+
+     // 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`,
+          border: `1px solid #6666`,
+          padding: `.5rem`,
+          borderRadius: `.3em`,
+          backgroundColor: `lightcyan`
+     }}>
+          
+          {usrSeleccionat && <h2>{usrSeleccionat._id}</h2>}
+          
+          <form
+               action={d => {
+                    try {
+                         Meteor.callAsync('editaOAfigPoble',
+                         {
+                              ...usrSeleccionat || [],
+                              nomPoble: d.get('nomPoble'),
+                              cp: d.get('cp') || "",
+                              comarca: d.get('comarca') || "",
+                         }).then(() => setUsrSeleccionat(null))
+                         .catch(err => console.error(err));
+                    } catch (err) {
+                         alert(err);
+                         console.error(err);
+                    }
+               }}
+          >
+               <label htmlFor="inUsername">Nom d'usuari: </label><input name="inUsername" type="text" defaultValue={ usrSeleccionat ? usrSeleccionat.username : ""}/><br />
+               <label htmlFor="inTel">Telèfon: </label><input name="inTel" type="tel" /><br />
+               <label htmlFor="inEmail">Correu Electrònic: </label><input name="inEmail" type="email" /><br />
+               <input type='submit' value="Actualitzar la Població" />
+               <button onClick={ev => {
+               ev.preventDefault();
+               if (confirm(`Vas a eliminar el poble "${usrSeleccionat.nomPoble}". És una operació irreversible. Procedir?`)) {
+                    Meteor.callAsync('eliminaPoble', usrSeleccionat._id).catch(err => console.error(err));
+                         setUsrSeleccionat(null);
+                    }
+               }}>Elimina</button>
+          </form>
+
+          { esEditor && <Suspense>
+               <AssignadorDeRols {... {esEditor, usrSeleccionat, rols, pobles, ambitsUSel}} /> 
+          </Suspense>
+          }
+     </div>;
+};
+
+
 export const Usuaris = () => {
      
      const [usrSeleccionat, setUsrSeleccionat] = useState(null);
@@ -18,90 +453,105 @@ 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());
      });
      // console.log("isAdmin: ", isAdmin) ;
      console.log("usuaris: ", usuaris);
+
+     // const [ambitsUSel, setAmbitsUSel] = useState([]);
      // (async () => {
-          useEffect(() => {
+
-               (async () => {
+     // let ambitsUSel = [];
-                    const comprovaAdmin = await Roles.userIsInRoleAsync(userId, ["admin"]);
+
-                    setEsEditor(comprovaAdmin);
+     useEffect(() => {
-               })();
+          (async () => {
-               
+               const comprovaAdmin = await Roles.userIsInRoleAsync(userId, ["admin"]);
-          }, []);
+               setEsEditor(comprovaAdmin);
+
+               // console.log("ambitsUSel: ", ambitsUSel);
+          })();
+          
+     }, []);
+
+     const ambitsUSel = useTracker("ambits", async () => {
+          return await Roles.getScopesForUserAsync(usrSeleccionat?._id);
+     });
+     // setAmbitsUSel(ambits);
+
+
+     const rols = useTracker("rols", async () => {
+          return await Roles.getRolesForUserAsync(usrSeleccionat?._id);
+     });
      // })();
 
-     const QuadreInfo_Usuari = () => {
+     // 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
+     // ;
           
-          return <div style={{
+
-               display: `inline-block`,
+     // (async () => {
-               border: `1px solid #6666`,
+     //      const admins = await Roles.getUsersInRoleAsync("administrador");
-               padding: `.5rem`,
+     //      // console.log("admins: ", admins);
-               borderRadius: `.3em`,
+     //      administradors = await admins?.fetchAsync();
-               backgroundColor: `lightcyan`
+     //      console.log("administradors: ", administradors);
-          }}>
+          
-               
+     //      const mons = await Roles.getUsersInRoleAsync("monitor_de_poble");
-               {usrSeleccionat && <h2>{usrSeleccionat._id}</h2>}
+     //      // console.log("mons: ", mons);
-               
+     //      monitors = await mons?.fetchAsync();
-               <form
+     //      console.log("monitors: ", monitors);
-                    action={d => {
+
-                         try {
+     //      const encs = await Roles.getUsersInRoleAsync("encarregat_de_tasques");
-                              Meteor.callAsync('editaOAfigPoble',
+     //      // console.log("encs: ", encs);
-                              {
+     //      encarregats = await encs?.fetchAsync();
-                                   ...usrSeleccionat || [],
+     //      console.log("encarregats: ", encarregats);
-                                   nomPoble: d.get('nomPoble'),
+
-                                   cp: d.get('cp') || "",
+     //      const vols = await Roles.getUsersInRoleAsync("voluntari_de_poble");
-                                   comarca: d.get('comarca') || "",
+     //      // console.log("vols: ", vols);
-                              }).then(() => setUsrSeleccionat(null))
+     //      voluntaris = await vols?.fetchAsync();
-                              .catch(err => console.error(err));
+     //      console.log("voluntaris: ", voluntaris);
-                         } catch (err) {
+     // })();
-                              alert(err);
+
-                              console.error(err);
+
-                         }
+     
-                    }}
-               >
-                    <label htmlFor="inUsername">Nom d'usuari: </label><input name="inUsername" type="text" defaultValue={ usrSeleccionat ? usrSeleccionat.username : ""}/><br />
-                    <label htmlFor="inTel">Telèfon: </label><input name="inTel" type="tel" /><br />
-                    <label htmlFor="inEmail">Correu Electrònic: </label><input name="inEmail" type="email" /><br />
-                    <input type='submit' value="Actualitzar la Població" />
-                    <button onClick={ev => {
-                    ev.preventDefault();
-                    if (confirm(`Vas a eliminar el poble "${usrSeleccionat.nomPoble}". És una operació irreversible. Procedir?`)) {
-                         Meteor.callAsync('eliminaPoble', usrSeleccionat._id).catch(err => console.error(err));
-                              setUsrSeleccionat(null);
-                         }
-                    }}>Elimina</button>
-               </form>
-          </div>;
-     };
 
      return <Suspense fallback={<>Carregant...</>} >
           <h1>Usuaris</h1>
 
-          { esEditor && <QuadreInfo_Usuari /> }
+          { esEditor && <QuadreInfo_Usuari {... {usrSeleccionat, esEditor, pobles, rols, ambitsUSel}} /> }
           
           <ul style={{
                display: `flex`,
                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,8 @@
     "meteor-node-stubs": "^1.2.5",
     "react": "19",
     "react-dom": "19",
+    "react-infinite-calendar": "^1.2.2",
+    "react-router": "^7.0.2",
     "react-router-dom": "^6.28.0",
     "react-select": "^5.8.3",
     "styled-components": "^6.1.13"
@@ -22,5 +24,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

@@ -6,6 +6,8 @@ import { Roles } from 'meteor/roles';
 import { ROLS_GLOBALS, ROLS_DE_POBLE } from '../imports/roles';
 import { NecessitatsCollection } from '../imports/api/necessitats';
 import { TipusCollection } from '../imports/api/tipus';
+import { CodisCollection } from '../imports/api/codis';
+// import { Codis } from '../imports/ui/Codis';
 
 async function insertPoble({ nomPoble, cp, comarca }) {
   await PoblesCollection.insertAsync({ nomPoble, cp, comarca, createdAt: new Date() });
@@ -184,7 +186,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();
   });
 
@@ -192,15 +203,43 @@ Meteor.startup(async () => {
     return TipusCollection.find();
   });
 
+  Meteor.publish('codis', async function (uid) {
+
+    const esAdmin = await Roles.userIsInRoleAsync(this.userId, "admin", null);
+    const userRoles = await Roles.getRolesForUserAsync(this.userId);
+
+    // console.log("userRoles: ", userRoles);
+    // console.log("esAdmin: ", esAdmin);
+
+    if (esAdmin) {
+      return CodisCollection.find({});
+    }
+
+    return false;
+
+    // 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}});
+  });
+
   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);
-    if (uid) {
+    console.log("esAdmin: ", esAdmin);
-      return Meteor.users.find({_id: uid},{fields: {username: 1, avatarId: 1, avatarLink: 1}});
+
+    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 +252,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({
+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 +364,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 {
@@ -329,6 +402,170 @@ Meteor.publish(null, function () {
         console.error(e);
       }
     },
+    
+    'editaOAfigCodi': async function (codiObj) {
+      const esAdmin = await Roles.userIsInRoleAsync(Meteor.userId(), "admin");
+      try {
+        console.log(`CREACIÓ DE CODI sol·licitada per a "${codiObj.codi}". Comprovant si ${Meteor.userId()} és Admin: `, esAdmin);
+
+        if (esAdmin && codiObj.codi) {
+          return await CodisCollection.upsertAsync(
+            {
+              _id: codiObj._id
+            }, {
+              $set: {
+                ...codiObj,
+                usuari: Meteor.userId(),
+                editedAt: new Date()
+              }
+            }
+          );
+        } else {
+          throw new Error("El valor del codi no és vàlid");
+        }
+      } catch (e) {
+        console.error(e);
+      }
+
+    },
+
+    'creaUsuariAmbCodi': async function (uObj, codi) {
+      
+      const codiObj = await CodisCollection.findOneAsync({codi});
+
+
+      const userId = await Accounts.createUserAsync(uObj);
+
+      const ara = new Date();
+      let dataIni, dataFi;
+
+      console.log("codiObj.periode_validesa_ini: ", await codiObj.periode_validesa_ini);
+
+      if (codiObj.act_cond === "on") {
+        dataIni = new Date(await codiObj.periode_validesa_ini);
+        dataFi = new Date(await codiObj.periode_validesa_fi);
+      }
+      // const dataIni = codiObj.act_cond === "on" ? new Date(codiObj.periode_validesa_ini) : null;
+      // const dataFi = codiObj.act_cond === "on" ? new Date(codiObj.periode_validesa_fi) : null;
+
+      console.log("codiObj: ", codiObj);
+      console.log("ara: ", ara);
+      console.log("dataIni: ", dataIni);
+      console.log("dataFi: ", dataFi);
+      console.log(`codiObj.act_cond === "on"`, codiObj.act_cond === "on");
+
+      try {
+        console.log(`APLICANT CODI "${codi}" sobre "${userId}".`); // Comprovant si ${Meteor.userId()} és Admin: `, esAdmin);
+
+        if ((codiObj.act_cond==="on" && (ara >= dataIni && ara <= dataFi)) || codiObj.act_abs) {
+          Roles.addUsersToRolesAsync(userId, codiObj.rol, codiObj.ambit);
+        }
+
+      } catch (e) {
+        console.error(e);
+      }
+
+    },
+
+    'usaCodiAmbUsuari': async function (userId, codi) {
+      // const esAdmin = await Roles.userIsInRoleAsync(Meteor.userId(), "admin");
+      const codiObj = await CodisCollection.find({codi}).fetchAsync();
+
+      const ara = new Date();
+      let dataIni, dataFi;
+
+      if (codiObj.act_cond === "on") {
+        dataIni = new Date(codiObj.periode_validesa_ini);
+        dataFi = new Date(codiObj.periode_validesa_fi);
+      }
+
+
+
+      console.log("codiObj: ", codiObj);
+
+      try {
+        console.log(`APLICANT CODI "${codi}" sobre "${userId}".`); // Comprovant si ${Meteor.userId()} és Admin: `, esAdmin);
+
+        if ((codiObj.act_cond==="on" && (ara >= dataIni || ara <= dataFi)) || codiObj.act_abs) {
+          Roles.addUsersToRolesAsync(userId, codiObj.rol, codiObj.ambit);
+        }
+      
+      
+        
+
+
+        // if (esAdmin && codiObj.codi) {
+        //   return await CodisCollection.upsertAsync(
+        //     {
+        //       _id: codiObj._id
+        //     }, {
+        //       $set: {
+        //         ...codiObj,
+        //         usuari: Meteor.userId(),
+        //         editedAt: new Date()
+        //       }
+        //     }
+        //   );
+        // } else {
+        //   throw new Error("El valor del codi no és vàlid");
+        // }
+      } catch (e) {
+        console.error(e);
+      }
+
+    },
+
+    'modCodiDocToggleAbsActiu': async function (cod) {
+      
+      console.log("modCodiDocToggleAbsActiu: ", cod);
+
+      return await CodisCollection.updateAsync(
+        { _id: cod._id },
+        { $set: {
+          ...cod,
+          absActiu: !cod.absActiu
+        }}
+      );
+    },
+
+    'modActivacioAbsCond': async function (cod, absCond) {
+      
+      console.log("modActivacioAbsCond: ", cod, absCond);
+
+      return await CodisCollection.updateAsync(
+        { _id: cod._id },
+        { $set: {
+          ...cod,
+          absCond
+        }}
+      );
+    },
+
+    'modCodiDocSetCondIni': async function (cod) {
+      
+      console.log("modCodiDocSetCondIni: ", cod);
+
+      return await CodisCollection.updateAsync(
+        { _id: cod._id },
+        { $set: {
+          ...cod,
+          condIni: cod.condIni
+        }}
+      );
+    },
+
+    'modCodiDocSetCondFi': async function (cod) {
+      
+      console.log("modCodiDocSetCondFi: ", cod);
+
+      return await CodisCollection.updateAsync(
+        { _id: cod._id },
+        { $set: {
+          ...cod,
+          condFi: cod.condFi
+        }}
+      );
+    },
   });
 
 });