110 lines
4.4 KiB
JavaScript
110 lines
4.4 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 { BarraNav } from "./BarraNav/BarraNav";
|
|
|
|
|
|
|
|
|
|
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 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`
|
|
}}>{
|
|
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: `.4em`,
|
|
padding: `4px`,
|
|
listStyle: `none`,
|
|
backgroundColor: `${'lightgreen' || 'lightcoral'}`
|
|
}}
|
|
>
|
|
{usr.username}{esEditor && <button onClick={() => {setUsrSeleccionat(usr)}}>Edita</button>}</li>)
|
|
}</ul>
|
|
</Suspense>;
|
|
};
|