From c566cad6e714f67e73408f6063290f59b560db1e Mon Sep 17 00:00:00 2001
From: Pasq G <pasq@riseup.net>
Date: Fri, 27 Dec 2024 18:22:06 +0100
Subject: [PATCH] Abans de gitea

---
 imports/ui/Poble.jsx  |  29 ++++++
 imports/ui/Pobles.jsx | 222 +++++++++++++++++++++++-------------------
 server/main.js        |  23 +++--
 3 files changed, 167 insertions(+), 107 deletions(-)

diff --git a/imports/ui/Poble.jsx b/imports/ui/Poble.jsx
index 4877e68..9e717f6 100644
--- a/imports/ui/Poble.jsx
+++ b/imports/ui/Poble.jsx
@@ -7,6 +7,7 @@ import { Roles } from 'meteor/roles';
 // import { useUserId } from 'meteor/react-meteor-accounts';
 import { BarraNav } from "./BarraNav/BarraNav";
 import { useParams } from "react-router-dom";
+import { NecessitatsCollection } from '../api/necessitats';
 
 
 
@@ -19,8 +20,11 @@ export const Poble = () => {
      // const [creantPoble, setCreantPoble] = useState(false);
      useSubscribe('pobles');
      useSubscribe('usuaris');
+     useSubscribe('necessitats', ambitPoble);
      // const pobles = useTracker("pobles", () => PoblesCollection.find().fetchAsync());
      const pobles = useFind(PoblesCollection, [{}, {sort: {nomPoble: 1}}]);
+     const necessitats = useFind(NecessitatsCollection, [{}, {sort: {titol: 1}}]);
+
      
      const [esEditor, setEsEditor] = useState(false);
      const userId = Meteor.userId();
@@ -166,6 +170,31 @@ export const Poble = () => {
                }
           </ul>
 
+          <h2>Necessitats:</h2>
+
+          <ul style={{
+               display: `flex`,
+               flexWrap: `wrap`,
+               justifyContent: `space-evenly`,
+               rowGap: `.3em`,
+               alignContent: `space-around`
+          }}>{
+          necessitats
+               .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>
+
           {/* { esEditor && (pobleSeleccionat || creantPoble) && <QuadreInfo_Poble /> }
           
           <ul style={{
diff --git a/imports/ui/Pobles.jsx b/imports/ui/Pobles.jsx
index 00b0e2f..20fe26f 100644
--- a/imports/ui/Pobles.jsx
+++ b/imports/ui/Pobles.jsx
@@ -7,6 +7,7 @@ import { Roles } from 'meteor/roles';
 // import { useUserId } from 'meteor/react-meteor-accounts';
 import { BarraNav } from "./BarraNav/BarraNav";
 import { Link } from 'react-router-dom';
+import { NecessitatsCollection } from '../api/necessitats';
 
 
 
@@ -33,6 +34,116 @@ export const Pobles = () => {
           }, []);
      // })();
 
+     const BotoPobleAmbIndicadors = ({pob}) => {
+          useSubscribe('necessitats', pob.ambitAssociat);
+          const necessitats = useFind(NecessitatsCollection, [{"poble.ambitAssociat": pob.ambitAssociat}]);
+          const [monitors, setMonitors] = useState(false);
+          
+
+          useEffect(() => {
+               (async () => {
+                    const mon = await Roles.getUsersInRoleAsync('monitor_de_poble', pob.ambitAssociat);
+                    setMonitors(mon.map(m => m).length);
+               })();
+          }, [pob]);
+          
+          
+          // console.log("mon: ", monitors);
+
+          return <li
+               key={`pob_${pob._id}`}
+               style={{
+                    display: `block`,
+                    border: `1px solid #6666`,
+                    borderRadius: `.4em`,
+                    padding: `4px`,
+                    listStyle: `none`,
+                    backgroundColor: `${'lightgreen' || 'lightcoral'}`,
+                    position: 'relative',
+                    margin: '.2em'
+               }}
+          >
+               {// Indicadors de Responsables
+                    <div style={{
+                         position: `absolute`,
+                         // display: `inline-block`,
+                         display: `flex`,
+                         justifyContent: `space-around`,
+                         left: `0`,
+                         top: `-.8em`,
+                         width: `100%`,
+                         fontSize: `60%`,
+                         textAlign: `center`,
+                         pointerEvents: `none`
+                    }}>
+                         {
+                              monitors
+                              ? <span style={{
+                                   border: `1px solid #6666`,
+                                   borderRadius: `50%`,
+                                   minWidth: `1rem`,
+                                   backgroundColor: `#ff0a`
+                              }}>{monitors}</span>
+                              : false
+                         }
+                         <span style={{
+                              border: `1px solid #6666`,
+                              borderRadius: `50%`,
+                              minWidth: `1rem`,
+                              backgroundColor: `#fffa`
+                         }}>2</span>
+                         <span style={{
+                              border: `1px solid #6666`,
+                              borderRadius: `50%`,
+                              minWidth: `1rem`,
+                              backgroundColor: `#fffa`
+                         }}>3</span>
+                    </div>
+               }
+
+               {// Indicadors de Necessitats
+                    <div style={{
+                         position: `absolute`,
+                         // display: `inline-block`,
+                         display: `flex`,
+                         // justifyContent: `space-around`,
+                         left: `-1.5em`,
+                         // top: `-.8em`,
+                         width: `100%`,
+                         fontSize: `60%`,
+                         textAlign: `center`,
+                         // lineHeight: `100%`
+                         top: `.8em`,
+                         pointerEvents: `none`
+                    }}>
+                         {
+                              necessitats.length
+                              ?
+                                   <span style={{
+                                        border: `1px solid #6666`,
+                                        borderRadius: `50%`,
+                                        minWidth: `1rem`,
+                                        backgroundColor: `#f006`
+                                   }}>{necessitats.length }</span>
+                              : false
+                         }
+                    </div>
+               }
+
+               {// Botó de creació de nou poble
+                    <Link to={`/poble/${pob.ambitAssociat}`}>
+                         {pob.nomPoble} {esEditor && <button
+                              onClick={(ev) => {
+                                   ev.preventDefault();
+                                   ev.stopPropagation();
+                                   
+                                   setPobleSeleccionat(pob);
+                              }
+                         }>Edita</button>}
+                    </Link>
+               }
+          </li>;
+     }
      
      
      const QuadreInfo_Poble = () => {
@@ -68,10 +179,10 @@ export const Pobles = () => {
                     }}
                >
                     <label htmlFor="nomPoble">Població: </label>
-                    <input 
-                         name="nomPoble" 
-                         type="text" 
-                         defaultValue={ pobleSeleccionat ? pobleSeleccionat.nomPoble : ""} 
+                    <input
+                         name="nomPoble"
+                         type="text"
+                         defaultValue={ pobleSeleccionat ? pobleSeleccionat.nomPoble : ""}
                          onChange={ev => refInAmbitAssignat.current.value = ev.target.value.replace(/ +/g, '-').toLowerCase()}
                     /><br />
                     <label htmlFor="comarca">Comarca: </label><input name="comarca" type="text" /><br />
@@ -97,6 +208,10 @@ export const Pobles = () => {
                </form>
           </div>;
      };
+
+     // const Indicador = ({valor, ambit, }) => {
+
+     // };
      
      return <Suspense fallback={<>Carregant...</>} >
           
@@ -113,102 +228,9 @@ export const Pobles = () => {
           }}>{
           pobles
                .sort((a,b) => a.nomPoble?.toLowerCase() > b.nomPoble?.toLowerCase())
-               .map(pob =>
-                    <li
-                         key={`pob_${pob._id}`}
-                         style={{
-                              display: `block`,
-                              border: `1px solid #6666`,
-                              borderRadius: `.4em`,
-                              padding: `4px`,
-                              listStyle: `none`,
-                              backgroundColor: `${'lightgreen' || 'lightcoral'}`,
-                              position: 'relative',
-                              margin: '.2em'
-                         }}
-                    >
-                         {
-                              <div style={{
-                                   position: `absolute`,
-                                   // display: `inline-block`,
-                                   display: `flex`,
-                                   justifyContent: `space-around`,
-                                   left: `0`,
-                                   top: `-.8em`,
-                                   width: `100%`,
-                                   fontSize: `60%`,
-                                   textAlign: `center`,
-                                   pointerEvents: `none`
-                              }}>
-                                   <span style={{
-                                        border: `1px solid #6666`,
-                                        borderRadius: `50%`,
-                                        minWidth: `1rem`,
-                                        backgroundColor: `#fffa`
-                                   }}>1</span>
-                                   <span style={{
-                                        border: `1px solid #6666`,
-                                        borderRadius: `50%`,
-                                        minWidth: `1rem`,
-                                        backgroundColor: `#fffa`
-                                   }}>2</span>
-                                   <span style={{
-                                        border: `1px solid #6666`,
-                                        borderRadius: `50%`,
-                                        minWidth: `1rem`,
-                                        backgroundColor: `#fffa`
-                                   }}>3</span>
-                              </div>
-                         }
-
-                         {
-                              <div style={{
-                                   position: `absolute`,
-                                   // display: `inline-block`,
-                                   display: `flex`,
-                                   // justifyContent: `space-around`,
-                                   left: `-1.5em`,
-                                   // top: `-.8em`,
-                                   width: `100%`,
-                                   fontSize: `60%`,
-                                   textAlign: `center`,
-                                   // lineHeight: `100%`
-                                   top: `.8em`,
-                                   pointerEvents: `none`
-                              }}>
-                                   <span style={{
-                                        border: `1px solid #6666`,
-                                        borderRadius: `50%`,
-                                        minWidth: `1rem`,
-                                        backgroundColor: `#fffa`
-                                   }}>0</span>
-                                   {/* <span style={{
-                                        border: `1px solid #6666`,
-                                        borderRadius: `50%`,
-                                        minWidth: `1rem`,
-                                        backgroundColor: `#fffa`
-                                   }}>2</span>
-                                   <span style={{
-                                        border: `1px solid #6666`,
-                                        borderRadius: `50%`,
-                                        minWidth: `1rem`,
-                                        backgroundColor: `#fffa`
-                                   }}>3</span> */}
-                              </div>
-                         }
-
-                         <Link to={`/poble/${pob.ambitAssociat}`}>
-                              {pob.nomPoble} {esEditor && <button 
-                                   onClick={(ev) => {
-                                        ev.preventDefault();
-                                        ev.stopPropagation();
-
-                                        setPobleSeleccionat(pob);
-                                   }
-                              }>Edita</button>}
-                         </Link>
-                    </li>
-               )
+               .map(pob => {
+                    return <BotoPobleAmbIndicadors pob={pob} />
+               })
           }</ul>
 
           {esEditor && <button
diff --git a/server/main.js b/server/main.js
index e522993..98febb9 100644
--- a/server/main.js
+++ b/server/main.js
@@ -184,7 +184,16 @@ Meteor.startup(async () => {
     return PoblesCollection.find();
   });
 
-  Meteor.publish("necessitats", function () {
+  Meteor.publish("necessitats", function (ambits) {
+
+    if (Array.isArray(ambits)) {
+      return;
+    }
+
+    if (ambits) {
+      return NecessitatsCollection.find({"poble.ambitAssociat": ambits});
+    }
+
     return NecessitatsCollection.find();
   });
 
@@ -229,14 +238,14 @@ Meteor.startup(async () => {
 
   // Publish user's own roles
 Meteor.publish(null, async function () {
-  if (await Roles.userIsInRoleAsync(this.userId, "admin")) {
+  // if (await Roles.userIsInRoleAsync(this.userId, "admin")) {
     return Meteor.roleAssignment.find();
-  }
+  // }
 
-  if (this.userId) {
-    return Meteor.roleAssignment.find({ "user._id": this.userId });
-  }
-  this.ready();
+  // if (this.userId) {
+  //   return Meteor.roleAssignment.find({ "user._id": this.userId });
+  // }
+  // this.ready();
 });
 
 // Publish roles for specific scope