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 { Meteor } from 'meteor/meteor';
|
||||
import { App } from '/imports/ui/App';
|
||||
@ -6,5 +6,7 @@ import { App } from '/imports/ui/App';
|
||||
Meteor.startup(() => {
|
||||
const container = document.getElementById('react-target');
|
||||
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';
|
||||
|
||||
|
||||
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 = () => {
|
||||
|
||||
@ -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, }) => {
|
||||
|
||||
@ -240,7 +245,7 @@ export const Pobles = () => {
|
||||
|
||||
<h1>Pobles</h1>
|
||||
|
||||
{ esEditor && (pobleSeleccionat || creantPoble) && <QuadreInfo_Poble /> }
|
||||
{ esEditor && (pobleSeleccionat || creantPoble) && <QuadreInfo_Poble {... {pobleSeleccionat, setPobleSeleccionat, esEditor} } /> }
|
||||
|
||||
<ul style={{
|
||||
display: `flex`,
|
||||
@ -252,7 +257,7 @@ export const Pobles = () => {
|
||||
pobles
|
||||
.sort((a,b) => a.nomPoble?.toLowerCase() > b.nomPoble?.toLowerCase())
|
||||
.map(pob => {
|
||||
return <BotoPobleAmbIndicadors pob={pob} key={`pob_${pob.ambitAssociat}`} />
|
||||
return <BotoPobleAmbIndicadors {... {pobleSeleccionat, setPobleSeleccionat, pob, esEditor, key: `pob_${pob.ambitAssociat}`} } />
|
||||
})
|
||||
}</ul>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user