This commit is contained in:
Pasq G 2025-01-10 10:44:13 +01:00
parent 52c381b592
commit 69ef122f9c

View File

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