Upadate routes

jcarrill0 · Jul 30, 2021 · c6b80d5 · c6b80d5
1 parent 1049d48
commit c6b80d5
Show file tree

Hide file tree

Showing 9 changed files with 167 additions and 115 deletions.
diff --git a/src/components/Forms/LoanForm.js b/src/components/Forms/LoanForm.js
@@ -14,7 +14,7 @@ import {
 import { ModalListCustomers } from '../Modal/ModalListCustomers'
 import { useModal } from 'hooks/useModal'
 
-
+//Refactorizar pediente
 const styles = {
     fielset: {
         fontSize: ".9rem",
@@ -44,6 +44,7 @@ const LoanForm = ({ client, getInfoLoan, loan, setClientId }) => {
         <Card>
             <CardBody>
                 <Form>
+                    {/* Refactorizar crear un componente del fieldset cliente */}
                     <fieldset className="px-2 mb-2" style={styles.legend}>
                         <legend style={styles.fielset}>Información del Cliente</legend>
                         <Row form>

diff --git a/src/components/Forms/PaymentForm.js b/src/components/Forms/PaymentForm.js
@@ -1,60 +1,104 @@
-import React from 'react'
+import { useEffect, useState } from "react";
 import {
-    // TabContent,
-    // TabPane,
-    // Nav,
-    // NavItem,
-    // NavLink,
+    Button,
     FormGroup,
     Form,
     Input,
     Row,
     Col,
     Card,
     CardBody,
-} from "reactstrap";
+} from "reactstrap"
 
+import { ModalListCustomers } from '../Modal/ModalListCustomers'
+import { useModal } from 'hooks/useModal'
+
+
+//Refactorizar pediente
+const styles = {
+    fielset: {
+        fontSize: ".9rem",
+        fontWeight: "600",
+        color: "#9A9DA9",
+        paddingLeft: ".2rem"
+    },
+    legend: { border: "1px solid #C8C8C8" }
+}
+
+
+function PaymentForm(props) {
+    // const [customer, setCustomer] = useState(client !== undefined ? client : null)
+    const [customer, setCustomer] = useState(null)
+
+    const { modal, toggle } = useModal()
 
-function PaymentForm() {
     return (
         <Card>
             <CardBody>
                 <Form>
-                    <Row form>
-                        <Col md="8">
-                            <FormGroup>
-                                <label>Cliente</label>
-                                <Input
-                                    placeholder="Cliente"
-                                    type="text"
-                                    name="cliente"
-                                />
-                            </FormGroup>
-                        </Col>
-                        <Col md="4">
-                            <FormGroup>
-                                <label>Fecha de Pago</label>
-                                <Input
-                                    placeholder=""
-                                    type="date"
-                                    name="paymentDate"
-                                />
-                            </FormGroup>
-                        </Col>
-                    </Row>
-                    <Row form>
-                        <Col md="12">
-                            <FormGroup>
-                                <Input
-                                    placeholder="Nota:"
-                                    type="textarea"
-                                    name="comment"
-                                />
-                            </FormGroup>
-                        </Col>
-                    </Row>
+                    {/* Refactorizar crear un componente del fieldset cliente */}
+                    <fieldset className="px-2 mb-2" style={styles.legend}>
+                        <legend style={styles.fielset}>Información del Cliente</legend>
+                        <Row form>
+                            <Col md="6">
+                                {/* Nota: crear un select con todo los nombres de los clientes */}
+                                <FormGroup>
+                                    <label>Nombre completo</label>
+                                    <Input
+                                        placeholder="Cliente"
+                                        type="text"
+                                        name="firstName"
+                                        disabled
+                                        value={customer ? customer.firstName : ""}
+                                    />
+                                </FormGroup>
+                            </Col>
+                            <Col md="5">
+                                <FormGroup>
+                                    <label>Identificación</label>
+                                    <Input
+                                        placeholder="Identificación"
+                                        type="text"
+                                        name="clienteId"
+                                        disabled
+                                        value={customer ? customer.numId : ""}
+                                    />
+                                </FormGroup>
+                            </Col>
+                            <Col md="1">
+                                <FormGroup>
+                                    <label className="invisible">Buscar</label>
+                                    <Button
+                                        color="danger"
+                                        className="my-0"
+                                        size='sm'
+                                        type="button"
+                                        onClick={toggle}
+                                        block
+                                    >
+                                        <i className="nc-icon nc-badge" style={{ fontSize: "1.3rem", padding: ".25rem 0" }} />
+                                    </Button>
+                                </FormGroup>
+                            </Col>
+                        </Row>
+                    </fieldset>
+                    <fieldset className="px-2 mb-2" style={styles.legend}>
+                        <legend style={styles.fielset}>Información de cuotas</legend>
+                        <Row form>
+                            <Col md="12">
+                                <FormGroup>
+                                    <Input
+                                        placeholder="Nota:"
+                                        type="textarea"
+                                        name="comment"
+                                    />
+                                </FormGroup>
+                            </Col>
+                        </Row>
+                    </fieldset>
                 </Form>
             </CardBody>
+            <ModalListCustomers modalNested={modal} toggleNested={toggle} customer={setCustomer} />
         </Card>
     )
 }

diff --git a/src/components/Modal/ModalBtn.js b/src/components/Modal/ModalBtn.js
diff --git a/src/components/Modal/ModalListPayments.js b/src/components/Modal/ModalListPayments.js
@@ -3,7 +3,7 @@
 export const ModalListPayments = ()=> {
     return (
         <div>
-            Lista de pagos
+            Lista de usuarios para realizar pago
         </div>
     )
 }
diff --git a/src/components/Modal/ModalPayment.js b/src/components/Modal/ModalPayment.js
@@ -0,0 +1,27 @@
+import { useState } from 'react'
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import PaymentForm from 'components/Forms/PaymentForm';
+
+
+export const ModalPayment = ({ modal, toggle }) => {
+
+    const addNewPayment = () => {
+        alert('Agregado nuevo pago...')
+    }
+
+    return (
+        <Modal isOpen={modal} toggle={toggle} backdrop={false} size="lg">
+            <ModalHeader className="text-uppercase d-flex justify-content-center">
+                Registrar nuevo Pago
+            </ModalHeader>
+            <ModalBody>
+                {/* <LoanForm {...{ client, getInfoLoan, loan, setClientId }} /> */}
+                <PaymentForm />
+            </ModalBody>
+            <ModalFooter>
+                <Button className="mr-2" color="danger" type="button" onClick={toggle}>Cancel</Button>
+                <Button color="success" type="button" onClick={addNewPayment}>Agregar pago</Button>
+            </ModalFooter>
+        </Modal>
+    )
+}
diff --git a/src/helpers/helpers.js b/src/helpers/helpers.js
@@ -60,4 +60,27 @@ export const getPayments = (loans, status = 'pago') => {
     return feeList
 }
 
+/*
+/// EJEMPLO DE GENERADOR DE CODIGO
+
+//tomamos la ultima id
+$consu = $db->query("SELECT * FROM tabla ORDER BY id DESC");
+$total = mysqli_num_rows($consu);
+$rowid = $consu->fetch_assoc();
+ 
+ 
+$codigo = sprintf("%06d", $rowid['id']+1); //le asignamos ceros antes a nuestra id para formatearla ejemplo 000015
+ 
+$prefijo = "ABC";
+ 
+$cod_final = $prefijo."-".$codigo; //quedaria algo asi ABC-000015
+ 
+//guardamos el codigo en la base de datos
+$guarda = $db->query("INSERT INTO tabla (codigo) VALUE ('$cod_final')");
+ 
+//mostramos el Codigo
+echo $cod_final;
+
+*/
+
 
diff --git a/src/routes.js b/src/routes.js
@@ -20,6 +20,13 @@ let routes = [
     component: Dashboard,
     layout: "/admin",
   },
+  {
+    path: "/customers",
+    name: "Clientes",
+    icon: "nc-icon nc-single-02",
+    component: CustomersTable,
+    layout: "/admin",
+  },
   {
     path: "/loans",
     name: "Préstamos",
@@ -34,13 +41,6 @@ let routes = [
     component: PaymentsTable,
     layout: "/admin",
   },
-  {
-    path: "/customers",
-    name: "Clientes",
-    icon: "nc-icon nc-single-02",
-    component: CustomersTable,
-    layout: "/admin",
-  },
   {
     path: "/employees",
     name: "Cobradores",

diff --git a/src/views/LoansTable.js b/src/views/LoansTable.js
@@ -8,14 +8,15 @@ import ReactTooltip from 'react-tooltip'
 import { useCustomerStore, useLoanStore } from '../store/store'
 import { useModal } from 'hooks/useModal'
 import { useLoad } from 'hooks/useLoad'
+import CalcForm from 'components/Forms/CalcForm';
 import { ModalCalc } from 'components/Modal/ModalCalc';
 import { ModalLoan } from 'components/Modal/ModalLoan';
-import CalcForm from 'components/Forms/CalcForm';
 import { styles } from './styles/styles'
 import { loanCalculate } from '../helpers/helpers'
 import { Spinner } from 'components/Spinner/Spinner';
 
 
+
 const LoansTable = () => {
     const loadCustomers = useCustomerStore(state => state.getAllCustomers)
     const customerList = useCustomerStore(state => state.customerList)

diff --git a/src/views/PaymentsTable.js b/src/views/PaymentsTable.js
@@ -1,17 +1,16 @@
-    import { useEffect, useState, useCallback } from 'react'
+import { useEffect, useState, useCallback } from 'react'
 
-    import BootstrapTable from 'react-bootstrap-table-next';
-    import { Button } from 'reactstrap';
-    import ReactTooltip from 'react-tooltip'
+import BootstrapTable from 'react-bootstrap-table-next';
+import { Button } from 'reactstrap';
+import ReactTooltip from 'react-tooltip'
 
-    import { useCustomerStore, useLoanStore } from '../store/store'
-    import { Spinner } from 'components/Spinner/Spinner'
-    // import { useModal } from 'hooks/useModal'
-    import { useLoad } from 'hooks/useLoad'
-    import ModalBtn from 'components/Modal/ModalBtn';
-    import PaymentForm from 'components/Forms/PaymentForm';
-    import { styles } from './styles/styles'
-    import { getPayments } from '../helpers/helpers'
+import { useCustomerStore, useLoanStore } from '../store/store'
+import { Spinner } from 'components/Spinner/Spinner'
+import { useModal } from 'hooks/useModal'
+import { useLoad } from 'hooks/useLoad'
+import { styles } from './styles/styles'
+import { getPayments } from '../helpers/helpers'
+import { ModalPayment } from 'components/Modal/ModalPayment';
 
 
     // test de objeto de pago
@@ -35,7 +34,7 @@
         const loanList = useLoanStore(state => state.loanList)
         const [paymentsList, setPaymentsList] = useState([])
 
-        // const { modal, toggle } = useModal()
+        const { modal, toggle } = useModal()
         const { loading, setLoading } = useLoad()
 
 
@@ -173,10 +172,14 @@
                 ? <Spinner />
                 : 
                     <>
-                        <ModalBtn
-                            title="Registrar nuevo pago"
-                            Component={<PaymentForm />}
-                        />
+                        <Button
+                            color="success"
+                            onClick={toggle}
+                        >
+                            <i className="nc-icon nc-simple-add mr-2 font-weight-bold" style={{ fontSize: "1rem" }} />
+                            Nuevo
+                        </Button>
+                        <ModalPayment {...{ modal, toggle }} />
                         <BootstrapTable
                             bootstrap4
                             keyField="_id"
@@ -188,18 +191,6 @@
                     </>
 
                 }
-                {/* <ModalBtn
-                    title="Registrar nuevo pago"
-                    Component={<PaymentForm />}
-                />
-                <BootstrapTable
-                    bootstrap4
-                    keyField="_id"
-                    data={paymentsList}
-                    columns={columns}
-                    bordered={false}
-                    noDataIndication="No hay pagos registrados"
-                /> */}
             </div>
         )
     }