WIP push

imports/ui/Codis.jsx

@@ -2,17 +2,15 @@ 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 { 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';
-import { BarraNav } from "./BarraNav/BarraNav";
-
-
+// import AsyncCreatableSelect from 'react-select/async-creatable';
+// import { BarraNav } from "./BarraNav/BarraNav";
 
 
 export const Codis = () => {
@@ -30,7 +28,7 @@ export const Codis = () => {
 
      // console.log("isAdmin: ", isAdmin) ;
      
-     let ambitSeleccionat = null;
+     const [ambitSeleccionat, setAmbitSeleccionat] = useState(null);
 
      useSubscribe('necessitats');
      const necessitats = useTracker("necessitats", () => NecessitatsCollection.find().fetchAsync());
@@ -55,16 +53,19 @@ export const Codis = () => {
      //           i.toLowerCase().includes(inputValue.toLowerCase())
      //      );
      // };
+     // const [ambitGeneral, setAmbitGeneral] = useState(ambitSeleccionat === "GENERAL");
+
+     const SelectorDeRol = () => {
 
-     const SelectorDeRol = ({ambitSeleccionat}) => {
           return <>
                <label htmlFor="selRol">Rol: </label>
                <Select
                     key={Math.random()}
                     name="selRol"
                     // filterOption={(opts) => necessitats.find(nec => nec.tipus === tipusSeleccionat._id)}
+                    
                     options={
-                         (ambitSeleccionat == "GENERAL")
+                         (ambitSeleccionat?.value === "GENERAL")
                          ? [
                               {
                                    value: "admin",
@@ -95,7 +96,7 @@ export const Codis = () => {
           </>;
      }
 
-     const QuadreInfo_Tipus = () => {
+     const QuadreInfo_Codis = () => {
           
           return <div style={{
                display: `inline-block`,
@@ -105,7 +106,7 @@ export const Codis = () => {
                backgroundColor: `lightcyan`
           }}>
           
-          {ambitSeleccionat && <h1>{ambitSeleccionat}</h1>}
+          {ambitSeleccionat && <h1>{ambitSeleccionat?.value}</h1>}
           <h1>Codis</h1>
 
           <p>Tria el rol que adquirirà qui utilitze el codi.</p>
@@ -140,6 +141,7 @@ export const Codis = () => {
                     name="selAmbit"
                     // formatCreateLabel={(inputValue) => "Crear nou tipus..."}
                     // filterOption={filterAmbit}
+                    defaultValue={ambitSeleccionat}
                     options={
                          [...
                               ambits
@@ -157,9 +159,9 @@ export const Codis = () => {
                     // onCreateOption={(inputValue) => Meteor.callAsync('afigT', {titol: inputValue})}
                     isSearchable
                     // loadOptions={tipus.map((v,i) => ({value: v, label: v.titol}))}
-                    onChange={ev => {
-                         ambitSeleccionat = ev.value;
-                         console.log("ambitSeleccionat: ", ambitSeleccionat);
+                    onChange={amb => {
+                         setAmbitSeleccionat(amb);
+                         console.log("amb: ", amb);
 
                     }}
                />
@@ -178,14 +180,14 @@ export const Codis = () => {
 
                <br />
 
-               <label htmlFor="titol">Títol: </label>
-               <input type="text" name='titol' />
+               <label htmlFor="actiu">Actiu? </label>
+               <input type="checkbox" name='actiu' />
 
                <br /><br />
 
-               <label htmlFor="poble">Poble: </label>
+               <label htmlFor="periode_validesa">Periode de validesa: </label>
+               <input type="date" name="periode_validesa" />
           
-               <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>)
@@ -210,7 +212,7 @@ export const Codis = () => {
           
      return <Suspense fallback={<>Carregant...</>} >
           
-          <QuadreInfo_Tipus />
+          <QuadreInfo_Codis />
 
           <br /><br />
 
@@ -230,7 +232,7 @@ export const Codis = () => {
                rowGap: `.3em`,
                alignContent: `space-around`
           }}>{
-          ambits
+               ambits
                .sort((a,b) => a.toLowerCase() > b.toLowerCase())
                .map(amb => <li
                     key={amb}
@@ -243,7 +245,7 @@ export const Codis = () => {
                          backgroundColor: `${'lightgreen' || 'lightcoral'}`
                     }}
                >
-                         {amb}{esEditor && <button onClick={() => {setTipusSeleccionat(titol)}}>Edita</button>}
+                         {amb}{esEditor && <button onClick={() => {setAmbitSeleccionat({value: amb, label: amb})}}>Edita</button>}
                </li>)
           }</ul>
      </Suspense>;