Avançant amb els formularis
This commit is contained in:
parent
f7d3aec8f9
commit
04d436a10f
@ -6,6 +6,7 @@ import { useSubscribe, useTracker, useFind } from 'meteor/react-meteor-data/susp
|
||||
|
||||
import { Pobles } from './Pobles';
|
||||
import { Necessitats } from './Necessitats';
|
||||
import { Tipus } from './Tipus';
|
||||
|
||||
const Loguejat = lazy(async () => await import('/imports/ui/Loguejat.jsx'));
|
||||
|
||||
@ -20,6 +21,7 @@ export const App = () => {
|
||||
<Route path="/" element={ <Suspense fallback={<>Carregant...</>}>{user ? <Loguejat /> : <Login/>}</Suspense> } />
|
||||
<Route path="/pobles" element={ <Pobles /> } />
|
||||
<Route path="/necessitats" element={ <Necessitats /> } />
|
||||
<Route path="/tipus" element={ <Tipus /> } />
|
||||
<Route path="/login" element={ <Login /> } />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
|
||||
@ -28,6 +28,11 @@ const SeccióNecessitats = () => <BotóSecció
|
||||
linkto="/necessitats"
|
||||
/>;
|
||||
|
||||
const SeccióTipus = () => <BotóSecció
|
||||
titol="Tipus"
|
||||
linkto="/tipus"
|
||||
/>;
|
||||
|
||||
const PanellSeccions = ({children}) => {
|
||||
return <div style={{
|
||||
display: `flex`,
|
||||
@ -50,6 +55,7 @@ const Loguejat = () => {
|
||||
<PanellSeccions >
|
||||
<SeccióPobles />
|
||||
<SeccióNecessitats />
|
||||
<SeccióTipus />
|
||||
</PanellSeccions>
|
||||
|
||||
|
||||
|
||||
@ -41,13 +41,6 @@ export const Necessitats = () => {
|
||||
const tipus = useTracker("tipus", () => TipusCollection.find().fetchAsync());
|
||||
|
||||
|
||||
const filterColors = (inputValue) => {
|
||||
return colourOptions.filter((i) =>
|
||||
i.label.toLowerCase().includes(inputValue.toLowerCase())
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
const QuadreInfo_Necessitats = () => {
|
||||
|
||||
return <div style={{
|
||||
@ -67,7 +60,7 @@ export const Necessitats = () => {
|
||||
action={d => {
|
||||
if (d.get('selTipus'))
|
||||
try {
|
||||
Meteor.callAsync('editaOAfigNecessitat', {
|
||||
Meteor.callAsync('afigNecessitat', {
|
||||
...necessitatSeleccionada || [],
|
||||
titol: d.get('titol'),
|
||||
tipus: d.get('selTipus') || "",
|
||||
@ -82,7 +75,13 @@ export const Necessitats = () => {
|
||||
}
|
||||
}}
|
||||
>
|
||||
<label htmlFor="tipus">Tipus: </label>
|
||||
|
||||
<label htmlFor="taTitol">Títol</label> <br />
|
||||
<textarea name='taTitol' placeholder='Títol de la necessitat...'></textarea>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<label htmlFor="tipus">Tipus</label>
|
||||
{/* Si
|
||||
l'usuari és ADMINISTRADOR o té permisos de responsabilitat, podrà crear nous Tipus al CREAR o a l'EDITAR
|
||||
si no
|
||||
@ -90,7 +89,8 @@ export const Necessitats = () => {
|
||||
*/}
|
||||
<AsyncCreatableSelect
|
||||
name="selTipus"
|
||||
defaultOptions={tipus.map((v,i) => ({value: v, label: v.titol})) }
|
||||
formatCreateLabel={(inputValue) => "Crear nou tipus..."}
|
||||
defaultOptions={tipus.map((v,i) => ({value: v._id, label: v.titol})).sort((a,b) => a.label.toLowerCase() > b.label.toLowerCase()) }
|
||||
onCreateOption={(inputValue) => Meteor.callAsync('afigTipus', {titol: inputValue})}
|
||||
// loadOptions={tipus.map((v,i) => ({value: v, label: v.titol}))}
|
||||
/>
|
||||
@ -105,14 +105,9 @@ export const Necessitats = () => {
|
||||
|
||||
<br />
|
||||
|
||||
<label htmlFor="titol">Títol: </label>
|
||||
<input type="text" name='titol' />
|
||||
<label htmlFor="poble">Poble</label>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<label htmlFor="poble">Poble: </label>
|
||||
|
||||
<CreatableSelect name="selPoble" options={pobles.map((v,i) => ({value: v, label: v.nomPoble})) } />
|
||||
<CreatableSelect name="selPoble" options={pobles.map((v,i) => ({value: v._id, label: v.nomPoble})) } />
|
||||
{/* <select name="selPoble">
|
||||
{
|
||||
pobles.map((v,i) => <option key={`optPob${i}`}>{v.nomPoble}</option>)
|
||||
@ -121,6 +116,24 @@ export const Necessitats = () => {
|
||||
|
||||
<br />
|
||||
|
||||
<label htmlFor="taDescripcio">Descripció: </label> <br />
|
||||
<textarea name="taDescripcio" id="taDescripcio" placeholder='Observacions i detalls particulars...'></textarea> <br />
|
||||
|
||||
<br />
|
||||
|
||||
<fieldset style={{
|
||||
borderRadius: `.4em`,
|
||||
border: `1px solid #6666`
|
||||
}}>
|
||||
<legend>Contacte</legend>
|
||||
<input required type="text" name="inContacte" id="inContacte" placeholder='Nom' /> <br />
|
||||
<input required type="text" name="inTelefon" id="inTelefon" placeholder='Telèfon' /> <br />
|
||||
<input required type="text" name="inEMail" id="inEMail" placeholder='Correu electrònic' /> <br />
|
||||
<input type="text" name="inAdreça" id="inAdreça" placeholder='Adreça' /> <br />
|
||||
</fieldset>
|
||||
|
||||
<br />
|
||||
|
||||
<input type='submit' value="Enviar" />
|
||||
|
||||
{necessitatSeleccionada && esEditor && <button onClick={ev => {
|
||||
@ -141,19 +154,27 @@ export const Necessitats = () => {
|
||||
|
||||
<br /><br />
|
||||
|
||||
{/* <AsyncCreatableSelect
|
||||
cacheOptions
|
||||
defaultOptions={tipus.map((v,i) => ({value: v, label: v.titol})) }
|
||||
loadOptions={tipus.map((v,i) => ({value: v, label: v.titol}))}
|
||||
/> */}
|
||||
|
||||
{/* <SelectSearch options={options} value="sv" name="language" placeholder="Choose your language" /> */}
|
||||
|
||||
|
||||
{/* <ul>{
|
||||
<ul style={{
|
||||
display: `flex`,
|
||||
flexWrap: `wrap`,
|
||||
justifyContent: `space-evenly`,
|
||||
rowGap: `.3em`,
|
||||
alignContent: `space-around`
|
||||
}}>{
|
||||
necessitats
|
||||
.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> */}
|
||||
.sort((a,b) => a.titol?.toLowerCase() > b.titol?.toLowerCase())
|
||||
.map(nec => <li
|
||||
key={`nec_${nec._id}`}
|
||||
style={{
|
||||
display: `block`,
|
||||
border: `1px solid #6666`,
|
||||
borderRadius: `.4em`,
|
||||
padding: `4px`,
|
||||
listStyle: `none`,
|
||||
backgroundColor: `${'lightgreen' || 'lightcoral'}`
|
||||
}}
|
||||
>
|
||||
{nec.titol}{esEditor && <button onClick={() => {setNecessitatSeleccionada(nec)}}>Edita</button>}</li>)
|
||||
}</ul>
|
||||
</Suspense>;
|
||||
};
|
||||
@ -78,13 +78,29 @@ export const Pobles = () => {
|
||||
|
||||
return <Suspense fallback={<>Carregant...</>} >
|
||||
|
||||
|
||||
{ esEditor && <QuadreInfo_Poble /> }
|
||||
|
||||
<ul>{
|
||||
<ul style={{
|
||||
display: `flex`,
|
||||
flexWrap: `wrap`,
|
||||
justifyContent: `space-evenly`,
|
||||
rowGap: `.3em`,
|
||||
alignContent: `space-around`
|
||||
}}>{
|
||||
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>)
|
||||
.map(pob => <li
|
||||
key={`pob_${pob._id}`}
|
||||
style={{
|
||||
display: `block`,
|
||||
border: `1px solid #6666`,
|
||||
borderRadius: `.4em`,
|
||||
padding: `4px`,
|
||||
listStyle: `none`,
|
||||
backgroundColor: `${'lightgreen' || 'lightcoral'}`
|
||||
}}
|
||||
>
|
||||
{pob.nomPoble}{esEditor && <button onClick={() => {setPobleSeleccionat(pob)}}>Edita</button>}</li>)
|
||||
}</ul>
|
||||
</Suspense>;
|
||||
};
|
||||
168
imports/ui/Tipus.jsx
Normal file
168
imports/ui/Tipus.jsx
Normal file
@ -0,0 +1,168 @@
|
||||
import React, { Suspense, useEffect, useState, useRef, lazy } from 'react';
|
||||
import { Meteor } from 'meteor/meteor';;
|
||||
import { NecessitatsCollection } from '/imports/api/necessitats.js';
|
||||
import { PoblesCollection } from '../api/pobles';
|
||||
import { TipusCollection } from '../api/tipus';
|
||||
import { useSubscribe, useTracker, useFind } from 'meteor/react-meteor-data/suspense';
|
||||
import { Roles } from 'meteor/roles';
|
||||
// import { useUserId } from 'meteor/react-meteor-accounts';
|
||||
import Select from 'react-select';
|
||||
|
||||
import CreatableSelect from 'react-select/creatable';
|
||||
import AsyncCreatableSelect from 'react-select/async-creatable';
|
||||
|
||||
|
||||
|
||||
|
||||
export const Tipus = () => {
|
||||
|
||||
// const [permes, setPermes] = useState(false);
|
||||
const [esEditor, setEsEditor] = useState(false);
|
||||
const userId = Meteor.userId();
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
const comprovaAdmin = await Roles.userIsInRoleAsync(userId, ["admin"]);
|
||||
setEsEditor(comprovaAdmin);
|
||||
})();
|
||||
}, []);
|
||||
|
||||
// console.log("isAdmin: ", isAdmin) ;
|
||||
|
||||
const [tipusSeleccionat, setNecessitatSeleccionat] = useState(null);
|
||||
|
||||
useSubscribe('necessitats');
|
||||
const necessitats = useTracker("necessitats", () => NecessitatsCollection.find().fetchAsync());
|
||||
|
||||
useSubscribe('pobles');
|
||||
const pobles = useTracker("pobles", () => PoblesCollection.find().fetchAsync());
|
||||
|
||||
useSubscribe('tipus');
|
||||
const tipus = useTracker("tipus", () => TipusCollection.find().fetchAsync());
|
||||
|
||||
console.log("tipus: ", tipus);
|
||||
console.log("necessitats: ", necessitats);
|
||||
|
||||
console.log("tipusSeleccionat: ", tipusSeleccionat);
|
||||
|
||||
const QuadreInfo_Tipus = () => {
|
||||
|
||||
return <div style={{
|
||||
display: `inline-block`,
|
||||
border: `1px solid #6666`,
|
||||
padding: `.5rem`,
|
||||
borderRadius: `.3em`,
|
||||
backgroundColor: `lightcyan`
|
||||
}}>
|
||||
{ esEditor && <div style={{
|
||||
color: `red`
|
||||
}}>ADMINISTRADOR</div> }
|
||||
{tipusSeleccionat && <h1>{tipusSeleccionat._id}</h1>}
|
||||
<h1>Tipus</h1>
|
||||
|
||||
|
||||
|
||||
<form
|
||||
action={d => {
|
||||
if (d.get('selTipus'))
|
||||
try {
|
||||
Meteor.callAsync('editaOAfigNecessitat', {
|
||||
...tipusSeleccionat || [],
|
||||
titol: d.get('titol'),
|
||||
tipus: d.get('selTipus') || "",
|
||||
poble: d.get('selPoble')
|
||||
})
|
||||
.then(() => setTipusSeleccionat(null))
|
||||
.catch(err => console.error(err))
|
||||
;
|
||||
} catch (err) {
|
||||
alert(err);
|
||||
console.error(err);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<label htmlFor="tipus">Tipus: </label>
|
||||
{/* Si
|
||||
l'usuari és ADMINISTRADOR o té permisos de responsabilitat, podrà crear nous Tipus al CREAR o a l'EDITAR
|
||||
si no
|
||||
tansols podrà assignar a un tipus predefinit o al de ALTRES
|
||||
*/}
|
||||
<AsyncCreatableSelect
|
||||
name="selTipus"
|
||||
formatCreateLabel={(inputValue) => "Crear nou tipus..."}
|
||||
defaultOptions={tipus.map((v,i) => ({value: v._id, label: v.titol})).sort((a,b) => a.label.toLowerCase() > b.label.toLowerCase()) }
|
||||
onCreateOption={(inputValue) => Meteor.callAsync('afigTipus', {titol: inputValue})}
|
||||
// loadOptions={tipus.map((v,i) => ({value: v, label: v.titol}))}
|
||||
/>
|
||||
|
||||
{/* <select name="selTipus">
|
||||
<option value="moble">Moble</option>
|
||||
<option value="maquinari">Maquinari</option>
|
||||
<option value="menjar">Menjar i beguda</option>
|
||||
<option value="infantil">Infantils</option>
|
||||
<option value="higiene">Higiene</option>
|
||||
</select> */}
|
||||
|
||||
<br />
|
||||
|
||||
<label htmlFor="selNecessitat">Necessitat: </label>
|
||||
<Select
|
||||
name="selNecessitat"
|
||||
// filterOption={(opts) => necessitats.find(nec => nec.tipus === tipusSeleccionat._id)}
|
||||
options={necessitats.map((v,i) => ({value: v._id, label: v.titol})).sort((a,b) => a.label.toLowerCase() > b.label.toLowerCase()) }
|
||||
/>
|
||||
|
||||
<br />
|
||||
|
||||
<label htmlFor="titol">Títol: </label>
|
||||
<input type="text" name='titol' />
|
||||
|
||||
<br /><br />
|
||||
|
||||
<label htmlFor="poble">Poble: </label>
|
||||
|
||||
<CreatableSelect name="selPoble" options={pobles.map((v,i) => ({value: v._id, label: v.nomPoble})) } />
|
||||
{/* <select name="selPoble">
|
||||
{
|
||||
pobles.map((v,i) => <option key={`optPob${i}`}>{v.nomPoble}</option>)
|
||||
}
|
||||
</select> */}
|
||||
|
||||
<br />
|
||||
|
||||
<input type='submit' value="Enviar" />
|
||||
|
||||
{tipusSeleccionat && esEditor && <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));
|
||||
setNecessitatSeleccionada(null);
|
||||
}
|
||||
}}>Elimina</button>}
|
||||
</form>
|
||||
</div>;
|
||||
};
|
||||
|
||||
|
||||
return <Suspense fallback={<>Carregant...</>} >
|
||||
|
||||
<QuadreInfo_Tipus />
|
||||
|
||||
<br /><br />
|
||||
|
||||
{/* <AsyncCreatableSelect
|
||||
cacheOptions
|
||||
defaultOptions={tipus.map((v,i) => ({value: v, label: v.titol})) }
|
||||
loadOptions={tipus.map((v,i) => ({value: v, label: v.titol}))}
|
||||
/> */}
|
||||
|
||||
{/* <SelectSearch options={options} value="sv" name="language" placeholder="Choose your language" /> */}
|
||||
|
||||
|
||||
{/* <ul>{
|
||||
tipus
|
||||
.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>;
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user