90 lines
3.5 KiB
JavaScript
90 lines
3.5 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';
|
|
|
|
|
|
|
|
|
|
export const Pobles = () => {
|
|
|
|
const [pobleSeleccionat, setPobleSeleccionat] = useState(null);
|
|
useSubscribe('pobles');
|
|
const pobles = useTracker("pobles", () => PoblesCollection.find().fetchAsync());
|
|
|
|
const [esEditor, setEsEditor] = useState(false);
|
|
const userId = Meteor.userId();
|
|
|
|
// console.log("isAdmin: ", isAdmin) ;
|
|
|
|
// (async () => {
|
|
useEffect(() => {
|
|
(async () => {
|
|
const comprovaAdmin = await Roles.userIsInRoleAsync(userId, ["admin"]);
|
|
setEsEditor(comprovaAdmin);
|
|
})();
|
|
}, []);
|
|
// })();
|
|
|
|
const QuadreInfo_Poble = () => {
|
|
|
|
return <div style={{
|
|
display: `inline-block`,
|
|
border: `1px solid #6666`,
|
|
padding: `.5rem`,
|
|
borderRadius: `.3em`,
|
|
backgroundColor: `lightcyan`
|
|
}}>
|
|
{ esEditor && <div style={{
|
|
color: `red`
|
|
}}>ADMINISTRADOR</div> }
|
|
{pobleSeleccionat && <h1>{pobleSeleccionat._id}</h1>}
|
|
<h1>Pobles</h1>
|
|
|
|
<form
|
|
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>{
|
|
pobles
|
|
.sort((a,b) => a.nomPoble?.toLowerCase() > b.nomPoble?.toLowerCase())
|
|
.map(pob => <li key={`pob_${pob._id}`}>{pob.nomPoble}{esEditor && <button onClick={() => {setPobleSeleccionat(pob)}}>Edita</button>}</li>)
|
|
}</ul>
|
|
</Suspense>;
|
|
}; |