385 lines
12 KiB
JavaScript
385 lines
12 KiB
JavaScript
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 { 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}) => {
|
|
|
|
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
|
|
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");
|
|
}}
|
|
>
|
|
{/* <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);
|
|
// // }}
|
|
// >
|
|
// {/* <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>;
|
|
};
|
|
|
|
|
|
export const Usuaris = () => {
|
|
|
|
const [usrSeleccionat, setUsrSeleccionat] = useState(null);
|
|
useSubscribe('pobles');
|
|
const pobles = useTracker("pobles", () => PoblesCollection.find().fetchAsync());
|
|
|
|
const [esEditor, setEsEditor] = useState(false);
|
|
const userId = Meteor.userId();
|
|
|
|
const usuaris = useTracker("usuaris", () => {
|
|
Meteor.subscribe('usuaris');
|
|
return Meteor.users.find().fetch();//.filter(u => u._id !== Meteor.userId());
|
|
});
|
|
// console.log("isAdmin: ", isAdmin) ;
|
|
console.log("usuaris: ", usuaris);
|
|
// (async () => {
|
|
useEffect(() => {
|
|
(async () => {
|
|
const comprovaAdmin = await Roles.userIsInRoleAsync(userId, ["admin"]);
|
|
setEsEditor(comprovaAdmin);
|
|
})();
|
|
|
|
}, []);
|
|
// })();
|
|
|
|
// const [monitors, setMonitors] = useState(false);
|
|
// const [encarregats, setEncarregats] = useState(false);
|
|
// const [voluntaris, setVoluntaris] = useState(false);
|
|
// const [administradors, setAdministradors] = useState(false);
|
|
|
|
// let mon, mons, enc, encs, vol, vols;
|
|
// let
|
|
// administradors,
|
|
// monitors,
|
|
// encarregats,
|
|
// voluntaris
|
|
// ;
|
|
|
|
|
|
// (async () => {
|
|
// const admins = await Roles.getUsersInRoleAsync("administrador");
|
|
// // console.log("admins: ", admins);
|
|
// administradors = await admins?.fetchAsync();
|
|
// console.log("administradors: ", administradors);
|
|
|
|
// const mons = await Roles.getUsersInRoleAsync("monitor_de_poble");
|
|
// // console.log("mons: ", mons);
|
|
// monitors = await mons?.fetchAsync();
|
|
// console.log("monitors: ", monitors);
|
|
|
|
// const encs = await Roles.getUsersInRoleAsync("encarregat_de_tasques");
|
|
// // console.log("encs: ", encs);
|
|
// encarregats = await encs?.fetchAsync();
|
|
// console.log("encarregats: ", encarregats);
|
|
|
|
// const vols = await Roles.getUsersInRoleAsync("voluntari_de_poble");
|
|
// // console.log("vols: ", vols);
|
|
// voluntaris = await vols?.fetchAsync();
|
|
// console.log("voluntaris: ", voluntaris);
|
|
// })();
|
|
|
|
|
|
const QuadreInfo_Usuari = () => {
|
|
|
|
return <div style={{
|
|
display: `inline-block`,
|
|
border: `1px solid #6666`,
|
|
padding: `.5rem`,
|
|
borderRadius: `.3em`,
|
|
backgroundColor: `lightcyan`
|
|
}}>
|
|
|
|
{usrSeleccionat && <h2>{usrSeleccionat._id}</h2>}
|
|
|
|
<form
|
|
action={d => {
|
|
try {
|
|
Meteor.callAsync('editaOAfigPoble',
|
|
{
|
|
...usrSeleccionat || [],
|
|
nomPoble: d.get('nomPoble'),
|
|
cp: d.get('cp') || "",
|
|
comarca: d.get('comarca') || "",
|
|
}).then(() => setUsrSeleccionat(null))
|
|
.catch(err => console.error(err));
|
|
} catch (err) {
|
|
alert(err);
|
|
console.error(err);
|
|
}
|
|
}}
|
|
>
|
|
<label htmlFor="inUsername">Nom d'usuari: </label><input name="inUsername" type="text" defaultValue={ usrSeleccionat ? usrSeleccionat.username : ""}/><br />
|
|
<label htmlFor="inTel">Telèfon: </label><input name="inTel" type="tel" /><br />
|
|
<label htmlFor="inEmail">Correu Electrònic: </label><input name="inEmail" type="email" /><br />
|
|
<input type='submit' value="Actualitzar la Població" />
|
|
<button onClick={ev => {
|
|
ev.preventDefault();
|
|
if (confirm(`Vas a eliminar el poble "${usrSeleccionat.nomPoble}". És una operació irreversible. Procedir?`)) {
|
|
Meteor.callAsync('eliminaPoble', usrSeleccionat._id).catch(err => console.error(err));
|
|
setUsrSeleccionat(null);
|
|
}
|
|
}}>Elimina</button>
|
|
</form>
|
|
</div>;
|
|
};
|
|
|
|
return <Suspense fallback={<>Carregant...</>} >
|
|
<h1>Usuaris</h1>
|
|
|
|
{ esEditor && <QuadreInfo_Usuari /> }
|
|
|
|
<ul style={{
|
|
display: `flex`,
|
|
flexWrap: `wrap`,
|
|
justifyContent: `space-evenly`,
|
|
rowGap: `.3em`,
|
|
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`,
|
|
// border: `1px solid #6666`,
|
|
// borderRadius: `50%`,
|
|
// padding: `4px`,
|
|
listStyle: `none`,
|
|
// backgroundColor: `${'lightgreen' || 'lightcoral'}`
|
|
}}
|
|
>
|
|
{/* {usr.username}{esEditor && <button onClick={() => {setUsrSeleccionat(usr)}}>Edita</button>} */}
|
|
<U u={usr} esAdministrador={usr._id === Meteor.userId() && esEditor} />
|
|
</li>)
|
|
}</ul>
|
|
</Suspense>;
|
|
};
|