Codis quasi operatius
This commit is contained in:
parent
6fd0e86205
commit
b61adc4f91
1
PROBLEMES.MD
Normal file
1
PROBLEMES.MD
Normal file
@ -0,0 +1 @@
|
||||
- Al crear codis encara se poden crear (i posteriorment assignarien) codis amb Àmbits i Rols incoherents.
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { Suspense, useEffect, useState, useRef, lazy } from 'react';
|
||||
import React, { Suspense, useEffect, useState } from 'react';
|
||||
import { Meteor } from 'meteor/meteor';
|
||||
import { Random } from 'meteor/random';
|
||||
import { NecessitatsCollection } from '/imports/api/necessitats.js';
|
||||
@ -10,15 +10,15 @@ import { Roles } from 'meteor/roles';
|
||||
// import { useUserId } from 'meteor/react-meteor-accounts';
|
||||
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 { BarraNav } from "./BarraNav/BarraNav";
|
||||
|
||||
// import InfiniteCalendar from 'react-infinite-calendar';
|
||||
// import 'react-infinite-calendar/styles.css';
|
||||
|
||||
function generaCodi() {0
|
||||
return Random.id().slice(0, 5);
|
||||
function generaCodi() {
|
||||
return Random.id().slice(0, 5).toUpperCase();
|
||||
}
|
||||
|
||||
export const Codis = () => {
|
||||
@ -38,10 +38,20 @@ export const Codis = () => {
|
||||
|
||||
// console.log("isAdmin: ", isAdmin) ;
|
||||
|
||||
const [ambitSeleccionat, setAmbitSeleccionat] = useState(null);
|
||||
// const [ambitSeleccionat, setAmbitSeleccionat] = useState(null);
|
||||
|
||||
useSubscribe('necessitats');
|
||||
const necessitats = useTracker("necessitats", () => NecessitatsCollection.find().fetchAsync());
|
||||
const [confecCodObj, setConfecCodObj] = useState({
|
||||
codi: generaCodi(),
|
||||
ambit: null,
|
||||
rol: null,
|
||||
absCond: "abs",
|
||||
absActiu: false,
|
||||
condIni: null,
|
||||
condFi: null
|
||||
});
|
||||
|
||||
// useSubscribe('necessitats');
|
||||
// const necessitats = useTracker("necessitats", () => NecessitatsCollection.find().fetchAsync());
|
||||
|
||||
useSubscribe('codis');
|
||||
const codis = useTracker("codis", () => CodisCollection.find().fetchAsync());
|
||||
@ -67,9 +77,12 @@ export const Codis = () => {
|
||||
// );
|
||||
// };
|
||||
// const [ambitGeneral, setAmbitGeneral] = useState(ambitSeleccionat === "GENERAL");
|
||||
const codiDoc = useTracker("codiDoc", () => CodisCollection.findOneAsync(codiSeleccionat?._id));
|
||||
const codiDoc = useTracker("valsFormDoc", () => CodisCollection.findOneAsync(codiSeleccionat?._id));
|
||||
|
||||
// let selRolVal = codiDoc?.rol || "usuari";
|
||||
|
||||
const SelectorDeRol = () => {
|
||||
// const [docRol, setDocRol] = useState(codiDoc?.rol)
|
||||
|
||||
return <>
|
||||
<label htmlFor="selRol">Rol: </label>
|
||||
@ -78,9 +91,38 @@ export const Codis = () => {
|
||||
key={Math.random()}
|
||||
name="selRol"
|
||||
// filterOption={(opts) => necessitats.find(nec => nec.tipus === tipusSeleccionat._id)}
|
||||
defaultValue={
|
||||
codiSeleccionat
|
||||
? {
|
||||
label: codiSeleccionat?.rol,
|
||||
value: codiSeleccionat?.rol
|
||||
}
|
||||
|
||||
: confecCodObj?.rol || null
|
||||
// ? {
|
||||
// label: confecCodObj.rol,
|
||||
// value: confecCodObj.rol
|
||||
// }
|
||||
|
||||
// : null
|
||||
// docRol && {label: docRol, value: docRol}
|
||||
}
|
||||
|
||||
onChange={v => {
|
||||
console.log("v: ", v);
|
||||
|
||||
console.log("cCO abans: ", confecCodObj);
|
||||
// setDocRol(v);
|
||||
setConfecCodObj({
|
||||
...confecCodObj,
|
||||
rol: v
|
||||
});
|
||||
|
||||
console.log("cCO despres: ", confecCodObj);
|
||||
}}
|
||||
|
||||
options={
|
||||
(ambitSeleccionat?.value === "GENERAL")
|
||||
(confecCodObj?.ambit?.value === "GENERAL")
|
||||
? [
|
||||
{
|
||||
value: "admin",
|
||||
@ -114,9 +156,14 @@ export const Codis = () => {
|
||||
const QuadreInfo_Codis = () => {
|
||||
|
||||
const [actCond, setActCond] = useState(true);
|
||||
const [codiGenerat, setCodiGenerat] = useState(generaCodi()?.toUpperCase());
|
||||
const [codiGenerat, setCodiGenerat] = useState(generaCodi());
|
||||
|
||||
const [absCond, setAbsCond] = useState('cond');
|
||||
|
||||
const codSelAbsActChecked = codiDoc ? {checked: codiDoc.absActiu} : {defaultChecked: confecCodObj.absActiu};
|
||||
|
||||
console.log("cS: ", codiSeleccionat);
|
||||
console.log("cCO: ", confecCodObj);
|
||||
|
||||
return <div style={{
|
||||
display: `inline-block`,
|
||||
@ -127,7 +174,7 @@ export const Codis = () => {
|
||||
outline: `${codiSeleccionat?._id ? '5px solid black' : 'none'}`
|
||||
}}>
|
||||
|
||||
{ambitSeleccionat && <h1>{ambitSeleccionat?.value}</h1>}
|
||||
{/* {ambitSeleccionat && <h1>{ambitSeleccionat?.value}</h1>} */}
|
||||
<h1>Codis</h1>
|
||||
|
||||
{/* <button
|
||||
@ -153,13 +200,12 @@ export const Codis = () => {
|
||||
padding: `0 .2em`,
|
||||
margin: `1rem auto`,
|
||||
}}
|
||||
>{codiSeleccionat ? codiSeleccionat?.codi : codiGenerat}</span>
|
||||
>{codiSeleccionat ? codiSeleccionat?.codi : confecCodObj.codi}</span>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<p>Tria el rol que adquirirà qui utilitze el codi anterior una vegada activat</p>
|
||||
|
||||
|
||||
<form
|
||||
action={d => {
|
||||
// if (d.get('selTipus'))
|
||||
@ -169,10 +215,15 @@ export const Codis = () => {
|
||||
codi: codiGenerat,
|
||||
ambit: d.get('selAmbit') || "",
|
||||
rol: d.get('selRol'),
|
||||
act_abs: d.get('activ_abs'),
|
||||
act_cond: d.get('activ_cond'),
|
||||
periode_validesa_ini: d.get('periode_validesa_ini'),
|
||||
periode_validesa_fi: d.get('periode_validesa_fi')
|
||||
|
||||
// act_abs: d.get('activAbs'),
|
||||
absCond,
|
||||
absActiu: d.get('absActiu'),
|
||||
condIni: d.get('condIni'),
|
||||
condFi: d.get('condFi')
|
||||
|
||||
|
||||
|
||||
})
|
||||
.then(() => setAmbitSeleccionat(null))
|
||||
.catch(err => console.error(err))
|
||||
@ -195,7 +246,10 @@ export const Codis = () => {
|
||||
name="selAmbit"
|
||||
// formatCreateLabel={(inputValue) => "Crear nou tipus..."}
|
||||
// filterOption={filterAmbit}
|
||||
defaultValue={ambitSeleccionat}
|
||||
defaultValue={codiDoc && {
|
||||
label: codiDoc?.ambit,
|
||||
value: codiDoc?.ambit
|
||||
} || confecCodObj.ambit}
|
||||
options={
|
||||
[...
|
||||
ambits
|
||||
@ -214,8 +268,13 @@ export const Codis = () => {
|
||||
isSearchable
|
||||
// loadOptions={tipus.map((v,i) => ({value: v, label: v.titol}))}
|
||||
onChange={amb => {
|
||||
setAmbitSeleccionat(amb);
|
||||
console.log("amb: ", amb);
|
||||
// setAmbitSeleccionat(amb);
|
||||
// console.log("amb: ", amb);
|
||||
|
||||
setConfecCodObj({
|
||||
...confecCodObj,
|
||||
ambit: amb
|
||||
});
|
||||
|
||||
}}
|
||||
/>
|
||||
@ -230,11 +289,12 @@ export const Codis = () => {
|
||||
|
||||
<br />
|
||||
|
||||
<SelectorDeRol {... {ambitSeleccionat}} />
|
||||
<SelectorDeRol />
|
||||
{/* {... {ambitSeleccionat, selRolVal}} /> */}
|
||||
|
||||
<br /><br />
|
||||
|
||||
<label htmlFor="periode_validesa">Periode de validesa: </label>
|
||||
<p>Periode de validesa: </p>
|
||||
|
||||
<div style={{
|
||||
border: `1px solid #cccc`,
|
||||
@ -243,43 +303,155 @@ export const Codis = () => {
|
||||
padding: `.6rem`,
|
||||
backgroundColor: `lightslategray`
|
||||
}}>
|
||||
<p>TEMPS REAL:</p>
|
||||
<label htmlFor="activ_abs"
|
||||
style={{
|
||||
color: `red`
|
||||
}}
|
||||
>Activació absoluta: </label>
|
||||
{/* <p>TEMPS REAL:</p> */}
|
||||
<input
|
||||
type="checkbox"
|
||||
name='activ_abs'
|
||||
defaultChecked={codiDoc?.act_abs === "on"}
|
||||
onChange={ev => {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
|
||||
Meteor.callAsync('modActivacioAbsolutaCodi', codiDoc);
|
||||
}}
|
||||
type="radio"
|
||||
name='absCond'
|
||||
value="abs"
|
||||
// defaultChecked={codiDoc?.act_abs === "on"}
|
||||
// checked={absCond === 'abs'}
|
||||
// onChange={(ev) => setAbsCond('abs')}
|
||||
|
||||
checked={codiSeleccionat && codiSeleccionat.absCond === 'abs' || confecCodObj?.absCond === 'abs'}
|
||||
onChange={(ev) => setConfecCodObj({
|
||||
...confecCodObj,
|
||||
absCond: 'abs'
|
||||
})}
|
||||
/>
|
||||
<label
|
||||
htmlFor="absCond"
|
||||
|
||||
onClick={() => setConfecCodObj({
|
||||
...confecCodObj,
|
||||
absCond: 'abs'
|
||||
})}>Activació absoluta</label>
|
||||
|
||||
<br />
|
||||
|
||||
{/* L'activació condicionada desactivada fa que no siguen 'required' les dates d'inici i final */}
|
||||
|
||||
<label htmlFor="activa_cond">Activació condicionada: </label>
|
||||
<input type="checkbox" name='activ_cond' checked={actCond}
|
||||
onChange={(ev) => setActCond(!actCond)}
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
color: `red`
|
||||
}}
|
||||
>ATENCIÓ al format! <b>(mm/dd/aaaa)</b></p>
|
||||
<input
|
||||
type="radio"
|
||||
name='absCond'
|
||||
value="cond"
|
||||
|
||||
// checked={absCond === 'cond'}
|
||||
// onChange={(ev) => setAbsCond('cond')}
|
||||
checked={codiSeleccionat && codiSeleccionat.absCond === 'cond' || confecCodObj?.absCond === 'cond'}
|
||||
onChange={(ev) => setConfecCodObj({
|
||||
...confecCodObj,
|
||||
absCond: 'cond'
|
||||
})}
|
||||
|
||||
/>
|
||||
<label htmlFor="absCond" onClick={
|
||||
() => setConfecCodObj({
|
||||
...confecCodObj,
|
||||
absCond: 'cond'
|
||||
})
|
||||
}>Activació condicionada</label>
|
||||
|
||||
Des de: <input required={actCond} type="date" name="periode_validesa_ini" />
|
||||
<br />
|
||||
Fins a: <input required={actCond} type="date" name="periode_validesa_fi" />
|
||||
<br />
|
||||
|
||||
<div style={{
|
||||
border: `1px solid #6666`,
|
||||
padding: `0 1rem`,
|
||||
borderRadius: `.5em`,
|
||||
backgroundColor: `#fff2`
|
||||
}}>
|
||||
{
|
||||
(codiSeleccionat
|
||||
&&
|
||||
codiSeleccionat?.absCond === 'abs'
|
||||
|
||||
||
|
||||
|
||||
confecCodObj?.absCond === 'abs'
|
||||
)
|
||||
&&
|
||||
|
||||
<>
|
||||
<label htmlFor="act_status">Actiu</label>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="absActiu"
|
||||
id="absActiu"
|
||||
{...codSelAbsActChecked}
|
||||
onChange={ev => {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
|
||||
// console.log("ev: ", ev);
|
||||
|
||||
if (codiSeleccionat) {
|
||||
Meteor.callAsync('modActivacioAbsolutaCodi', codiSeleccionat);
|
||||
setCodiSeleccionat({
|
||||
...codiSeleccionat,
|
||||
absActiu: !codiSeleccionat.absActiu
|
||||
});
|
||||
}
|
||||
|
||||
setConfecCodObj({
|
||||
...confecCodObj,
|
||||
absActiu: !confecCodObj.absActiu
|
||||
});
|
||||
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
// codiDoc &&
|
||||
// Meteor.callAsync('modActivacioAbsolutaCodi', codiDoc);
|
||||
}
|
||||
{
|
||||
codiSeleccionat
|
||||
&&
|
||||
codiSeleccionat.absCond === 'cond'
|
||||
|
||||
||
|
||||
|
||||
confecCodObj?.absCond === 'cond'
|
||||
&&
|
||||
<>
|
||||
<p
|
||||
style={{
|
||||
color: `red`
|
||||
}}
|
||||
>ATENCIÓ al format! <b>(mm/dd/aaaa)</b></p>
|
||||
|
||||
Des de: <input
|
||||
required={confecCodObj.actCond === 'cond'}
|
||||
type="date"
|
||||
name="condIni"
|
||||
onChange={v => {
|
||||
|
||||
console.log("dataIni: ", v.currentTarget.value);
|
||||
setConfecCodObj({
|
||||
...confecCodObj,
|
||||
condIni: v.currentTarget.value
|
||||
})
|
||||
}}
|
||||
defaultValue={confecCodObj.condIni}
|
||||
/>
|
||||
<br />
|
||||
Fins a: <input
|
||||
required={confecCodObj.
|
||||
actCond === 'cond'}
|
||||
type="date"
|
||||
name="condFi"
|
||||
onChange={v => {
|
||||
console.log("dataFi: ", v.currentTarget.value);
|
||||
setConfecCodObj({
|
||||
...confecCodObj,
|
||||
condFi: v.currentTarget.value
|
||||
})
|
||||
}}
|
||||
defaultValue={confecCodObj.condFi}
|
||||
/>
|
||||
<br />
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* <select name="s.
|
||||
@ -354,6 +526,7 @@ export const Codis = () => {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
|
||||
// console.log("codSel: ", codiSeleccionat);
|
||||
setCodiSeleccionat(codiSeleccionat?._id === cod._id ? null : cod);
|
||||
}}
|
||||
>
|
||||
@ -366,8 +539,8 @@ export const Codis = () => {
|
||||
height: `5px`,
|
||||
right: `2px`,
|
||||
top: `2px`,
|
||||
boxShadow: `0 0 14px 5px ${cod.act_abs === "on" ? "lime" : "red"}`,
|
||||
backgroundColor: `${cod.act_abs === "on" ? "lime" : "red"}`
|
||||
boxShadow: `0 0 14px 5px ${cod.absActiu ? "lime" : "red"}`,
|
||||
backgroundColor: `${cod.absActiu ? "lime" : "red"}`
|
||||
}}
|
||||
onClick={ev => {
|
||||
ev.preventDefault();
|
||||
|
||||
@ -523,7 +523,7 @@ Meteor.methods({
|
||||
{ _id: cod._id },
|
||||
{ $set: {
|
||||
...cod,
|
||||
'act_abs': cod.act_abs === "on" ? null : "on"
|
||||
absActiu: !cod.absActiu
|
||||
}}
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user