pasq/XaSuMu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Abans d'actualitzar la versió de React a 19

Browse Source
This commit is contained in:
Pasq G 2024-12-07 20:17:53 +01:00
parent 2b4cccb598
commit 261e23e7a0
7 changed files with 202 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
imports/ui/App.jsx
View File

@ -10,13 +10,29 @@ import { Tipus } from './Tipus';
import { BarraNav } from './BarraNav/BarraNav';
import { UserStat } from './BarraNav/UserStat';
import { Usuaris } from './Usuaris';
const Loguejat = lazy(async () => await import('/imports/ui/Loguejat.jsx'));
export const App = () => {
const user = useTracker("user", async () => await Meteor.userAsync());
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);
})();
}, []);
// const userId = await Meteor.userAsync();
return <BrowserRouter>
@ -26,6 +42,7 @@ export const App = () => {
<Routes>
<Route path="/" element={ <Suspense fallback={<>Carregant...</>}>{user ? <Loguejat /> : <Login/>}</Suspense> } />
<Route path="/usuaris" element={ <Usuaris /> } />
<Route path="/pobles" element={ <Pobles /> } />
<Route path="/necessitats" element={ <Necessitats /> } />
<Route path="/tipus" element={ <Tipus /> } />

49
imports/ui/BarraNav/BarraNav.jsx
View File

@ -1,50 +1,11 @@
import React, {useState, useEffect} from "react";
import React, {useState, useEffect, lazy} from "react";
import { Link } from 'react-router-dom';
import { Roles } from 'meteor/roles';
import { PanellSeccions } from "./PanellSeccions/PanellSeccions";
const BotóSecció = ({titol, linkto}) => {
return <div style={{
border: `1px solid #aaaa`,
borderRadius: `.3rem`,
padding: `.2rem`,
backgroundColor: `lightblue`,
margin: `.5rem`
}}>
<Link to={linkto} >{titol}</Link>
</div>;
};
const SeccióPobles = () => <BotóSecció
titol="Pobles"
linkto="/pobles"
/>;
const SeccióNecessitats = () => <BotóSecció
titol="Necessitats"
linkto="/necessitats"
/>;
const SeccióTipus = () => <BotóSecció
titol="Tipus"
linkto="/tipus"
/>;
const SeccióUsuaris = () => <BotóSecció
titol="Usuaris"
linkto="/usuaris"
/>;
const PanellSeccions = ({children}) => {
return <><div style={{
display: `flex`,
border: `1px solid #cccc`,
padding: `.5rem`,
borderRadius: `.5rem`,
backgroundColor: `lightslategray`
}}>{children}</div>
<br />
</>;
};
const SeccióPobles = lazy(async () => await import('/imports/ui/BarraNav/PanellSeccions/PanellSeccions.jsx'));
const SeccióNecessitats = lazy(async () => await import('/imports/ui/BarraNav/PanellSeccions/PanellSeccions.jsx'));
const SeccióTipus = lazy(async () => await import('/imports/ui/BarraNav/PanellSeccions/PanellSeccions.jsx'));
const BarraNav = () => {
const [esAdministrador, setEsAdministrador] = useState(false);

48
imports/ui/BarraNav/PanellSeccions/PanellSeccions.jsx Normal file
View File

@ -0,0 +1,48 @@
import React from "react";
import { Link } from "react-router-dom";
export const BotóSecció = ({titol, linkto}) => {
return <div style={{
border: `1px solid #aaaa`,
borderRadius: `.3rem`,
padding: `.2rem`,
backgroundColor: `lightblue`,
margin: `.5rem`
}}>
<Link to={linkto} >{titol}</Link>
</div>;
};
export const SeccióPobles = () => <BotóSecció
titol="Pobles"
linkto="/pobles"
/>;
export const SeccióNecessitats = () => <BotóSecció
titol="Necessitats"
linkto="/necessitats"
/>;
export const SeccióTipus = () => <BotóSecció
titol="Tipus"
linkto="/tipus"
/>;
export const SeccióUsuaris = () => <BotóSecció
titol="Usuaris"
linkto="/usuaris"
/>;
export const PanellSeccions = ({children}) => {
return <><div style={{
display: `flex`,
border: `1px solid #cccc`,
padding: `.5rem`,
borderRadius: `.5rem`,
backgroundColor: `lightslategray`
}}>{children}</div>
<br />
</>;
};

18
imports/ui/BarraNav/UserStat.jsx
View File

@ -1,6 +1,6 @@
import { Meteor } from 'meteor/meteor';
import React, {useState, useEffect} from 'react';
import { useTracker } from 'meteor/react-meteor-data/suspense';
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';
@ -36,11 +36,11 @@ const UserStat = ({setEditaPerfil}) => {
useEffect(() => {
(async () => {
const comprovaAdmin = await Roles.userIsInRoleAsync(userId, ["admin"]);
// (async () => {
const comprovaAdmin = Roles.userIsInRole(userId, ["admin"]);
setEsAdministrador(comprovaAdmin);
})();
}, []);
// })()1
}, []);
// const u = useUserContext();
@ -64,7 +64,7 @@ const UserStat = ({setEditaPerfil}) => {
// alert("avLnk: ", u.profile.avatarLink);
return <>
return <Suspense fallback="Carregant...">
<div
style={{
// color: `lightblue`,
@ -96,7 +96,7 @@ const UserStat = ({setEditaPerfil}) => {
}}
>
{ esAdministrador && <div style={{
{ u && esAdministrador && <div style={{
color: `red`,
fontSize: `xx-small`,
// textAlign: `right`
@ -185,7 +185,7 @@ const UserStat = ({setEditaPerfil}) => {
</div>
}
<br /><br />
</>;
</Suspense>;
};
export { UserStat };

3
imports/ui/Pobles.jsx
View File

@ -14,7 +14,8 @@ export const Pobles = () => {
const [pobleSeleccionat, setPobleSeleccionat] = useState(null);
useSubscribe('pobles');
const pobles = useTracker("pobles", () => PoblesCollection.find().fetchAsync());
// const pobles = useTracker("pobles", () => PoblesCollection.find().fetchAsync());
const pobles = useFind(PoblesCollection, [{}, {sort: {nomPoble: 1}}]);
const [esEditor, setEsEditor] = useState(false);
const userId = Meteor.userId();

110
imports/ui/Usuaris.jsx Normal file
View File

@ -0,0 +1,110 @@
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>;
};

11
server/main.js
View File

@ -192,6 +192,17 @@ Meteor.startup(async () => {
return TipusCollection.find();
});
Meteor.publish('usuaris', async function (uid) {
const esAdmin = await Roles.userIsInRoleAsync(Meteor.userId(), "admin");
const userRoles = await Roles.getRolesForUserAsync(Meteor.userId());
console.log("userRoles: ", userRoles);
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}});
});
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
try {