Camps de pobles reactius al canviar la selecció
This commit is contained in:
parent
765e01ad7d
commit
f4d51a73cf
@ -1,4 +1,4 @@
|
|||||||
import React from 'react';
|
import React, {StrictMode} from 'react';
|
||||||
import { createRoot } from 'react-dom/client';
|
import { createRoot } from 'react-dom/client';
|
||||||
import { Meteor } from 'meteor/meteor';
|
import { Meteor } from 'meteor/meteor';
|
||||||
import { App } from '/imports/ui/App';
|
import { App } from '/imports/ui/App';
|
||||||
@ -6,5 +6,7 @@ import { App } from '/imports/ui/App';
|
|||||||
Meteor.startup(() => {
|
Meteor.startup(() => {
|
||||||
const container = document.getElementById('react-target');
|
const container = document.getElementById('react-target');
|
||||||
const root = createRoot(container);
|
const root = createRoot(container);
|
||||||
root.render(<App />);
|
root.render(<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>);
|
||||||
});
|
});
|
||||||
|
|||||||
@ -10,7 +10,203 @@ import { Link } from 'react-router-dom';
|
|||||||
import { NecessitatsCollection } from '../api/necessitats';
|
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 = () => {
|
export const Pobles = () => {
|
||||||
|
|
||||||
@ -36,201 +232,10 @@ export const Pobles = () => {
|
|||||||
}, []);
|
}, []);
|
||||||
// })();
|
// })();
|
||||||
|
|
||||||
const BotoPobleAmbIndicadors = ({pob}) => {
|
|
||||||
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>;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
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>;
|
|
||||||
};
|
|
||||||
|
|
||||||
// const Indicador = ({valor, ambit, }) => {
|
// const Indicador = ({valor, ambit, }) => {
|
||||||
|
|
||||||
@ -240,7 +245,7 @@ export const Pobles = () => {
|
|||||||
|
|
||||||
<h1>Pobles</h1>
|
<h1>Pobles</h1>
|
||||||
|
|
||||||
{ esEditor && (pobleSeleccionat || creantPoble) && <QuadreInfo_Poble /> }
|
{ esEditor && (pobleSeleccionat || creantPoble) && <QuadreInfo_Poble {... {pobleSeleccionat, setPobleSeleccionat, esEditor} } /> }
|
||||||
|
|
||||||
<ul style={{
|
<ul style={{
|
||||||
display: `flex`,
|
display: `flex`,
|
||||||
@ -252,7 +257,7 @@ export const Pobles = () => {
|
|||||||
pobles
|
pobles
|
||||||
.sort((a,b) => a.nomPoble?.toLowerCase() > b.nomPoble?.toLowerCase())
|
.sort((a,b) => a.nomPoble?.toLowerCase() > b.nomPoble?.toLowerCase())
|
||||||
.map(pob => {
|
.map(pob => {
|
||||||
return <BotoPobleAmbIndicadors pob={pob} key={`pob_${pob.ambitAssociat}`} />
|
return <BotoPobleAmbIndicadors {... {pobleSeleccionat, setPobleSeleccionat, pob, esEditor, key: `pob_${pob.ambitAssociat}`} } />
|
||||||
})
|
})
|
||||||
}</ul>
|
}</ul>
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user