Merge branch 'adapt-money-move-form-for-new-logic' into 'master'
adapt frontend See merge request saburly/gangsta/roraccounting!3
This commit was merged in pull request #3.
This commit is contained in:
@@ -5,6 +5,7 @@
|
|||||||
"proxy": "http://localhost:3001",
|
"proxy": "http://localhost:3001",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"axios": "^0.19.0",
|
"axios": "^0.19.0",
|
||||||
|
"materialize-css": "^1.0.0",
|
||||||
"react": "^16.8.6",
|
"react": "^16.8.6",
|
||||||
"react-dom": "^16.8.6",
|
"react-dom": "^16.8.6",
|
||||||
"react-materialize": "^3.3.1",
|
"react-materialize": "^3.3.1",
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import React, {useState, useEffect} from 'react';
|
import React, {useState, useEffect} from 'react';
|
||||||
import {Icon, Select, TextInput, Button} from 'react-materialize';
|
import M from 'materialize-css';
|
||||||
|
import {Icon, Select, TextInput, Button, Textarea} from 'react-materialize';
|
||||||
import './Cash.css';
|
import './Cash.css';
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
|
|
||||||
@@ -9,6 +10,8 @@ const MakeMoneyMove = (props) => {
|
|||||||
const [selectedTo, setSelectedTo] = useState("");
|
const [selectedTo, setSelectedTo] = useState("");
|
||||||
const [homiesCash, setHomiesCash] = useState([]);
|
const [homiesCash, setHomiesCash] = useState([]);
|
||||||
const [amountToMove, setAmountToMove] = useState(null);
|
const [amountToMove, setAmountToMove] = useState(null);
|
||||||
|
const [moveDescription, setMoveDescription] = useState("");
|
||||||
|
const [submitInProgress, setSubmitInProgress] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const getCashForHomies = async () => {
|
const getCashForHomies = async () => {
|
||||||
@@ -46,25 +49,58 @@ const MakeMoneyMove = (props) => {
|
|||||||
setSelectedTo(e.target.value);
|
setSelectedTo(e.target.value);
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleSubmit = (e) => {
|
const handleDescriptionChange = (e) => {
|
||||||
|
setMoveDescription(e.target.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
const clearForm = () => {
|
||||||
|
setAmountToMove(null);
|
||||||
|
setSelectedFrom("");
|
||||||
|
setSelectedTo("");
|
||||||
|
setMoveDescription("");
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSubmit = async (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
console.log("Submitting");
|
setSubmitInProgress(true);
|
||||||
|
const moneyMoveRequest = {
|
||||||
|
money_move: {
|
||||||
|
amount: amountToMove,
|
||||||
|
from_homie_id: selectedFrom,
|
||||||
|
to_homie_id: selectedTo,
|
||||||
|
description: moveDescription
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const submitResponse = await axios.post('/money_moves', moneyMoveRequest);
|
||||||
|
|
||||||
|
if (submitResponse && submitResponse.status === 200 && submitResponse.data === true) {
|
||||||
|
M.toast({html: "Money lounde...moved"});
|
||||||
|
clearForm();
|
||||||
|
} else {
|
||||||
|
M.toast({html: "Yo! It ain't workin'"});
|
||||||
|
}
|
||||||
|
setSubmitInProgress(false);
|
||||||
}
|
}
|
||||||
|
|
||||||
const formComplete = () => (
|
const formComplete = () => (
|
||||||
selectedFrom !== "" &&
|
|
||||||
selectedFrom !== selectedTo &&
|
selectedFrom !== selectedTo &&
|
||||||
selectedTo !== "" &&
|
selectedTo !== "" &&
|
||||||
amountToMove > 0
|
amountToMove > 0
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const disableSubmit = () => (!formComplete() || submitInProgress);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="center-align">
|
<div className="center-align">
|
||||||
<form onSubmit={handleSubmit}>
|
<form onSubmit={handleSubmit}>
|
||||||
<h3>Make Money Move</h3>
|
<h3>Make Money Move</h3>
|
||||||
<TextInput label="How Much?" type="number"
|
<TextInput label="How Much?"
|
||||||
|
type="number"
|
||||||
required pattern="^\\?(([1-9](\\d*|\\d{0,2}(,\\d{3})*))|0)(\\.\\d{1,2})?$"
|
required pattern="^\\?(([1-9](\\d*|\\d{0,2}(,\\d{3})*))|0)(\\.\\d{1,2})?$"
|
||||||
defaultValue={`${amountToMove}`} step="0.01" onChange={handleAmountChange} />
|
value={`${amountToMove}`}
|
||||||
|
step="0.01"
|
||||||
|
onChange={handleAmountChange}/>
|
||||||
<label>From: </label>
|
<label>From: </label>
|
||||||
<Select value={selectedFrom} name="from_homie" onChange={handleFromHomieChange}>
|
<Select value={selectedFrom} name="from_homie" onChange={handleFromHomieChange}>
|
||||||
<option disabled value="">Select Homie</option>
|
<option disabled value="">Select Homie</option>
|
||||||
@@ -77,9 +113,12 @@ return (
|
|||||||
{filteredHomieOptions}
|
{filteredHomieOptions}
|
||||||
</Select>
|
</Select>
|
||||||
|
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
<Textarea label="Tag" value={moveDescription} onChange={handleDescriptionChange}/>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<Button disabled={!formComplete()} waves="light">
|
<Button disabled={disableSubmit()} waves="light">
|
||||||
Do it
|
Do it
|
||||||
<Icon left>
|
<Icon left>
|
||||||
attach_money
|
attach_money
|
||||||
|
|||||||
@@ -5961,6 +5961,11 @@ map-visit@^1.0.0:
|
|||||||
dependencies:
|
dependencies:
|
||||||
object-visit "^1.0.0"
|
object-visit "^1.0.0"
|
||||||
|
|
||||||
|
materialize-css@^1.0.0:
|
||||||
|
version "1.0.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/materialize-css/-/materialize-css-1.0.0.tgz#8d5db1c4a81c6d65f3b2e2ca83a8e08daa24d1be"
|
||||||
|
integrity sha512-4/oecXl8y/1i8RDZvyvwAICyqwNoKU4or5uf8uoAd74k76KzZ0Llym4zhJ5lLNUskcqjO0AuMcvNyDkpz8Z6zw==
|
||||||
|
|
||||||
md5.js@^1.3.4:
|
md5.js@^1.3.4:
|
||||||
version "1.3.5"
|
version "1.3.5"
|
||||||
resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
|
resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
|
||||||
|
|||||||
Reference in New Issue
Block a user