Avançant amb els formularis

imports/ui/App.jsx

@@ -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>

imports/ui/Loguejat.jsx

@@ -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>
           
 

imports/ui/Necessitats.jsx

@@ -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,15 +75,22 @@ export const Necessitats = () => {
                     }
                }}
           >
-               <label htmlFor="tipus">Tipus: </label>
+
-               {/* Si 
+               <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
                     tansols podrà assignar a un tipus predefinit o al de ALTRES
                */}
-               <AsyncCreatableSelect 
+               <AsyncCreatableSelect
-                    name="selTipus" 
+                    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>
+               <label htmlFor="poble">Poble</label>
-               <input type="text" name='titol' />
 
-               <br /><br />
+               <CreatableSelect name="selPoble" options={pobles.map((v,i) => ({value: v._id, label: v.nomPoble})) } />
-
-               <label htmlFor="poble">Poble: </label>
-
-               <CreatableSelect name="selPoble" options={pobles.map((v,i) => ({value: v, label: v.nomPoble})) } />
                {/* <select name="selPoble">
                     {
                          pobles.map((v,i) => <option key={`optPob${i}`}>{v.nomPoble}</option>)
@@ -120,7 +115,25 @@ export const Necessitats = () => {
                </select> */}
                
                <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
+          <ul style={{
-               cacheOptions
+               display: `flex`,
-               defaultOptions={tipus.map((v,i) => ({value: v, label: v.titol})) }
+               flexWrap: `wrap`,
-               loadOptions={tipus.map((v,i) => ({value: v, label: v.titol}))}
+               justifyContent: `space-evenly`,
-          /> */}
+               rowGap: `.3em`,
-          
+               alignContent: `space-around`
-          {/* <SelectSearch options={options} value="sv" name="language" placeholder="Choose your language" /> */}
+          }}>{
-
-          
-          {/* <ul>{
           necessitats
-               .sort((a,b) => a.nomPoble?.toLowerCase() > b.nomPoble?.toLowerCase())
+               .sort((a,b) => a.titol?.toLowerCase() > b.titol?.toLowerCase())
-               .map(pob => <li key={`pob_${pob._id}`}>{pob.nomPoble}{esEditor && <button onClick={() => {setPobleSeleccionat(pob)}}>Edita</button>}</li>)
+               .map(nec => <li
-          }</ul> */}
+                    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>;
 };

imports/ui/Pobles.jsx

@@ -44,7 +44,7 @@ export const Pobles = () => {
                {pobleSeleccionat && <h1>{pobleSeleccionat._id}</h1>}
                <h1>Pobles</h1>
 
-               <form 
+               <form
                     action={d => {
                     try {
                     Meteor.callAsync('editaOAfigPoble',
@@ -68,23 +68,39 @@ export const Pobles = () => {
                     <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));
+                         Meteor.callAsync('eliminaPoble', pobleSeleccionat._id).catch(err => console.error(err));
-                    setPobleSeleccionat(null);
+                              setPobleSeleccionat(null);
-                    }
+                         }
                     }}>Elimina</button>
                </form>
           </div>;
      };
 
      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>;
 };

imports/ui/Tipus.jsx

@@ -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>;
+};