Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 3590 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3590 Rev 4372
Línea -... Línea 1...
- 
 
 1 
/* eslint-disable react/prop-types */
1 
import {axios} from "../../../utils";
 2 
import { axios } from "../../../utils";
2 
import React, { useEffect, useRef, useState } from "react";
 3 
import React, { useEffect, useRef, useState } from "react";
3 
import { useForm } from "react-hook-form";
 4 
import { useForm } from "react-hook-form";
4 
import { useDispatch } from "react-redux";
 5 
import { useDispatch } from "react-redux";
5 
import { addNotification } from "../../../redux/notification/notification.actions";
 6 
import { addNotification } from "../../../redux/notification/notification.actions";
6 
import BootstrapModal from "../../../shared/bootstrapModal/BootstrapModal";
 7 
import BootstrapModal from "../../../shared/bootstrapModal/BootstrapModal";
Línea 33... Línea 34...
33 
    field: "provider",
 34 
    field: "provider",
34 
    headerName: "Proveedor",
 35 
    headerName: "Proveedor",
35 
  },
 36 
  },
36 
];
 37 
];
Línea 37... Línea -...
37 
 
 - 
 
38 
const Transactions = (props) => {
 - 
 
39 
  // props destructuring
 38 
 
40 
  const { routeTransactions, amounts, balance, routeAddFunds } = props;
 - 
 
41 
  const dispatch = useDispatch();
 - 
 
42 
 
 - 
 
43 
  // react hook form
 - 
 
Línea 44... Línea 39...
44 
  const { register, handleSubmit, errors } = useForm();
 39 
const Transactions = ({ routeTransactions, amounts, balance, routeAddFunds }) => {
- 
 
 40 
 
- 
 
 41 
  const formEl = useRef();
Línea 45... Línea 42...
45 
 
 42 
  const dispatch = useDispatch();
46 
  const formEl = useRef();
 43 
  const { register, handleSubmit, errors } = useForm();
47 
 
 44 
 
Línea 85... Línea 82...
85 
    window.location.replace(paypalRoute);
 82 
    window.location.replace(paypalRoute);
86 
    setModalLoading(false);
 83 
    setModalLoading(false);
87 
  };
 84 
  };
Línea 88... Línea 85...
88 
 
 85 
 
89 
  return (
 86 
  return (
90 
    <React.Fragment>
 87 
    <>
91 
      <div className="acc-setting">
 88 
      <div className="acc-setting">
92 
        <h3>Transacciones</h3>
 89 
        <h3>Transacciones</h3>
93 
        <div className="cp-field mb-3">
 90 
        <div className="cp-field">
94 
          <h5 id="location-formatted-address">Balance (USD)</h5>
 91 
          <h5 id="location-formatted-address">Balance (USD)</h5>
95 
          <div className="cpp-fiel">
 92 
          <div className="cpp-fiel">
96 
            <input type="text" readOnly value={balance} />
 93 
            <input type="text" readOnly value={balance} />
97 
          </div>
 94 
          </div>
Línea 102... Línea 99...
102 
              value="Agregar fondos"
 99 
              value="Agregar fondos"
103 
              onClick={() => setTransactionModalOpen(true)}
 100 
              onClick={() => setTransactionModalOpen(true)}
104 
            />
 101 
            />
105 
          </div>
 102 
          </div>
106 
        </div>
 103 
        </div>
107 
        <div className="cp-field" style={{ marginBottom: "1rem" }}>
 104 
        <div className="cp-field">
108 
          <MaterialTable
 105 
          <MaterialTable
109 
            columns={TransactionTableColumns}
 106 
            columns={TransactionTableColumns}
110 
            rows={transactionData.items}
 107 
            rows={transactionData.items}
111 
            count={transactionData.total}
 108 
            count={transactionData.total}
112 
          />
 109 
          />
Línea 114... Línea 111...
114 
      </div>
 111 
      </div>
115 
      <BootstrapModal
 112 
      <BootstrapModal
116 
        show={transactionModalOpen}
 113 
        show={transactionModalOpen}
117 
        title="Agregar Fondos"
 114 
        title="Agregar Fondos"
118 
        onClose={() => setTransactionModalOpen(false)}
 115 
        onClose={() => setTransactionModalOpen(false)}
119 
        onAccept={() => {
 - 
 
120 
          formEl.current.dispatchEvent(
 - 
 
121 
            new Event("submit", { cancelable: true, bubbles: true })
 116 
        onAccept={() => formEl.current.dispatchEvent(new Event("submit", { cancelable: true, bubbles: true }))}
122 
          );
 - 
 
123 
        }}
 - 
 
124 
      >
 117 
      >
125 
        <React.Fragment>
 118 
        {modalLoading && <Spinner />}
126 
          <form onSubmit={handleSubmit(onSubmit)} ref={formEl}>
 119 
        <form onSubmit={handleSubmit(onSubmit)} ref={formEl}>
127 
            <div className="form-group">
 120 
          <div className="form-group">
128 
              <input
 121 
            <input
129 
                type="text"
 122 
              type="text"
130 
                name="description"
 123 
              name="description"
131 
                id="description"
 124 
              id="description"
132 
                placeholder="Descripción"
 125 
              placeholder="Descripción"
133 
                ref={register({
 126 
              ref={register({
134 
                  required: "Por favor ingrese una descripción",
 127 
                required: "Por favor ingrese una descripción",
135 
                  maxLength: {
 128 
                maxLength: {
136 
                    value: 50,
 129 
                  value: 50,
137 
                    message: "Máximo 50 caracteres",
 130 
                  message: "Máximo 50 caracteres",
138 
                  },
 131 
                },
139 
                })}
 132 
              })}
140 
              ></input>
 133 
            ></input>
141 
              <FormErrorFeedback>
 134 
            <FormErrorFeedback>
142 
                {errors?.description?.message}
 135 
              {errors?.description?.message}
143 
              </FormErrorFeedback>
 136 
            </FormErrorFeedback>
144 
              <select
 137 
            <select
145 
                name="amount"
 138 
              name="amount"
146 
                id="amount"
 139 
              id="amount"
147 
                ref={register({
 140 
              ref={register({
148 
                  required: "Por favor eliga un monto",
 141 
                required: "Por favor eliga un monto",
149 
                })}
 142 
              })}
150 
                defaultValue=""
 143 
              defaultValue=""
151 
              >
 144 
            >
152 
                <option value="">Monto</option>
 145 
              <option value="">Monto</option>
153 
                {Object.entries(amounts).map(([key, value]) => (
 146 
              {Object.entries(amounts).map(([key, value]) => (
154 
                  <option value={key} key={key}>
 147 
                <option value={key} key={key}>
155 
                    {value}
 148 
                  {value}
156 
                  </option>
 149 
                </option>
157 
                ))}
 150 
              ))}
158 
                <FormErrorFeedback>{errors?.amount?.message}</FormErrorFeedback>
 151 
              <FormErrorFeedback>{errors?.amount?.message}</FormErrorFeedback>
159 
              </select>
 152 
            </select>
160 
            </div>
 153 
          </div>
161 
          </form>
 154 
        </form>
162 
        </React.Fragment>
 - 
 
163 
      </BootstrapModal>
 155 
      </BootstrapModal>
164 
      {modalLoading && (
 - 
 
165 
        <div className="spinner-container">
 - 
 
166 
          <Spinner />
 - 
 
167 
        </div>
 - 
 
168 
      )}
 156 
    </>
169 
    </React.Fragment>
 - 
 
170 
  );
 157 
  );
171 
};
 158 
};
Línea 172... Línea 159...
172 
 
 159