From 2258fbc9b526bcfe82cb47e5399363f17e71f5f2 Mon Sep 17 00:00:00 2001
From: meskio <meskio@sindominio.net>
Date: Fri, 14 Jun 2024 16:56:25 +0200
Subject: [PATCH] Allow selecting disabled members in topup and transaciton
 list

* Closes: #33
---
 src/Topup.js                       |  7 ++++++-
 src/member/MemberPicker.js         | 23 +++++++++++++----------
 src/purchase/PurchaseList.js       |  2 +-
 src/transaction/TransactionList.js |  9 +++++++--
 4 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/src/Topup.js b/src/Topup.js
index d9728fa..5581d83 100644
--- a/src/Topup.js
+++ b/src/Topup.js
@@ -29,7 +29,12 @@ function Topup() {
 
   return (
     <Sender url="/api/topup" body={body} onSuccess={setTransaction}>
-      <MemberPicker member={member} onChange={setMember} num={parseInt(num)} />
+      <MemberPicker
+        member={member}
+        onChange={setMember}
+        num={parseInt(num)}
+        allowDisabled
+      />
       <Form.Group as={Row}>
         <Form.Label as="legend" column sm={2}>
           Recarga
diff --git a/src/member/MemberPicker.js b/src/member/MemberPicker.js
index 5c26145..2222a09 100644
--- a/src/member/MemberPicker.js
+++ b/src/member/MemberPicker.js
@@ -3,9 +3,9 @@ import { Form, Col, Row } from "react-bootstrap";
 import { Typeahead } from "react-bootstrap-typeahead";
 import Fetcher from "../Fetcher";
 
-function MemberPicker(props) {
+function MemberPicker({ member, num, text, onChange, allowDisabled }) {
   const [members, setStateMembers] = useState([]);
-  const selected = props.member ? [props.member] : [];
+  const selected = member ? [member] : [];
 
   const setMembers = (members) => {
     const newMembers = members.map((m) => {
@@ -13,24 +13,27 @@ function MemberPicker(props) {
       if (!m.login) {
         m.login = "";
       }
+      if (allowDisabled) {
+        m.disabled = false;
+      }
       return m;
     });
     setStateMembers(newMembers);
 
-    if (!props.member && props.num) {
-      const member = newMembers.find((m) => m.num === props.num);
-      props.onChange(member);
+    if (!member && num) {
+      const m = newMembers.find((m) => m.num === num);
+      onChange(m);
     }
   };
 
-  const text = props.text ? props.text : "Socia";
+  const pickerText = text ? text : "Socia";
 
   return (
     <Fetcher url="/api/member" onFetch={setMembers}>
       <Row>
         <Col sm={4}>
           <br />
-          <h4 className="text-right">{text}:</h4>
+          <h4 className="text-right">{pickerText}:</h4>
         </Col>
         <Form.Group as={Col} sm={2}>
           <Form.Label>Num</Form.Label>
@@ -38,7 +41,7 @@ function MemberPicker(props) {
             id="member-num"
             labelKey="numStr"
             options={members}
-            onChange={(m) => props.onChange(m[0])}
+            onChange={(m) => onChange(m[0])}
             selected={selected}
           />
         </Form.Group>
@@ -48,7 +51,7 @@ function MemberPicker(props) {
             id="member-login"
             labelKey="login"
             options={members}
-            onChange={(m) => props.onChange(m[0])}
+            onChange={(m) => onChange(m[0])}
             selected={selected}
           />
         </Form.Group>
@@ -58,7 +61,7 @@ function MemberPicker(props) {
             id="member-name"
             labelKey="name"
             options={members}
-            onChange={(m) => props.onChange(m[0])}
+            onChange={(m) => onChange(m[0])}
             selected={selected}
           />
         </Form.Group>
diff --git a/src/purchase/PurchaseList.js b/src/purchase/PurchaseList.js
index 259f8d3..8b7cec4 100644
--- a/src/purchase/PurchaseList.js
+++ b/src/purchase/PurchaseList.js
@@ -87,7 +87,7 @@ function PurchaseList() {
     memberPicker = (
       <Col xs={12} sm={6}>
         {rows}
-        <MemberPicker onChange={setMember} />
+        <MemberPicker onChange={setMember} allowDisabled />
       </Col>
     );
   }
diff --git a/src/transaction/TransactionList.js b/src/transaction/TransactionList.js
index 0c138cd..8eea6b9 100644
--- a/src/transaction/TransactionList.js
+++ b/src/transaction/TransactionList.js
@@ -93,8 +93,13 @@ function TransactionList() {
             </Form.Select>
           </Form.Group>
         </Row>
-        <MemberPicker member={member} onChange={setMember} />
-        <MemberPicker member={proxy} onChange={setProxy} text="Por" />
+        <MemberPicker member={member} onChange={setMember} allowDisabled />
+        <MemberPicker
+          member={proxy}
+          onChange={setProxy}
+          text="Por"
+          allowDisabled
+        />
       </Form>
       <br />
       <Fetcher url={"/api/transaction?" + query} onFetch={setTransactions}>
-- 
GitLab