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,33 +10,73 @@ import { Link } from 'react-router-dom';
|
||||
import { NecessitatsCollection } from '../api/necessitats';
|
||||
|
||||
|
||||
const QuadreInfo_Poble = ({esEditor, pobleSeleccionat, setPobleSeleccionat}) => {
|
||||
|
||||
const refInAmbitAssignat = useRef();
|
||||
|
||||
export const Pobles = () => {
|
||||
return <div style={{
|
||||
display: `inline-block`,
|
||||
border: `1px solid #6666`,
|
||||
padding: `.5rem`,
|
||||
borderRadius: `.3em`,
|
||||
backgroundColor: `lightcyan`
|
||||
}}>
|
||||
|
||||
const [pobleSeleccionat, setPobleSeleccionat] = useState(null);
|
||||
const [creantPoble, setCreantPoble] = useState(false);
|
||||
useSubscribe('pobles');
|
||||
useSubscribe('usuaris');
|
||||
{pobleSeleccionat && <h2>{pobleSeleccionat._id}</h2>}
|
||||
|
||||
// const pobles = useTracker("pobles", () => PoblesCollection.find().fetchAsync());
|
||||
const pobles = useFind(PoblesCollection, [{}, {sort: {nomPoble: 1}}]);
|
||||
<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 />
|
||||
|
||||
const [esEditor, setEsEditor] = useState(false);
|
||||
const userId = Meteor.userId();
|
||||
{ esEditor && <>
|
||||
<br /><br />
|
||||
Àmbit associat:
|
||||
|
||||
// console.log("isAdmin: ", isAdmin) ;
|
||||
<input type="text" name="ambit-associat" id="ambit-associat" key={`inAmbit_${pobleSeleccionat._id}`} defaultValue={pobleSeleccionat?.ambitAssociat} ref={refInAmbitAssignat} />
|
||||
{/* // nomPoble.replace(/ +/g, '-').toLowerCase()}/> */}
|
||||
<br /><br />
|
||||
</>}
|
||||
|
||||
// (async () => {
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
const comprovaAdmin = await Roles.userIsInRoleAsync(userId, ["admin"]);
|
||||
setEsEditor(comprovaAdmin);
|
||||
})();
|
||||
}, []);
|
||||
// })();
|
||||
<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}) => {
|
||||
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);
|
||||
@ -168,69 +208,34 @@ export const Pobles = () => {
|
||||
</li>;
|
||||
}
|
||||
|
||||
export const Pobles = () => {
|
||||
|
||||
const QuadreInfo_Poble = () => {
|
||||
const [pobleSeleccionat, setPobleSeleccionat] = useState(null);
|
||||
const [creantPoble, setCreantPoble] = useState(false);
|
||||
useSubscribe('pobles');
|
||||
useSubscribe('usuaris');
|
||||
|
||||
const refInAmbitAssignat = useRef();
|
||||
// const pobles = useTracker("pobles", () => PoblesCollection.find().fetchAsync());
|
||||
const pobles = useFind(PoblesCollection, [{}, {sort: {nomPoble: 1}}]);
|
||||
|
||||
return <div style={{
|
||||
display: `inline-block`,
|
||||
border: `1px solid #6666`,
|
||||
padding: `.5rem`,
|
||||
borderRadius: `.3em`,
|
||||
backgroundColor: `lightcyan`
|
||||
}}>
|
||||
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);
|
||||
})();
|
||||
}, []);
|
||||
// })();
|
||||
|
||||
{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