97 lines
3.5 KiB
JavaScript
97 lines
3.5 KiB
JavaScript
import { EndPoints, getData, putData } from "../services/AccessAPI";
|
|
import { useNavigate, useLocation } from "react-router-dom";
|
|
import { useEffect } from "react";
|
|
import { useState } from 'react';
|
|
import { Routes } from "../services/Routes";
|
|
|
|
export default function UpdateAccount() {
|
|
let navigate = useNavigate();
|
|
const search = useLocation().search;
|
|
const id = new URLSearchParams(search).get('id')
|
|
|
|
const [name, setName] = useState("");
|
|
//const [owner, setOwner] = useState(0);
|
|
const [initBalance, setInitBalance] = useState("");
|
|
//const [currency, setCurrency] = useState(0);
|
|
const [extNum, setExtNum] = useState("");
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
useEffect(() => {
|
|
getData(EndPoints.ACCOUNTS + "/" + id).then(
|
|
(result) => {
|
|
if (result) {
|
|
setName(result.name);
|
|
//setOwner(result.ownerId);
|
|
setInitBalance(result.initialBalance);
|
|
//setCurrency(result.currencyId);
|
|
setExtNum(result.externalAccountNumber);
|
|
setLoading(false);
|
|
}
|
|
}
|
|
);
|
|
}, [id])
|
|
|
|
function onKeyDown(e) {
|
|
if (e.key === 'Enter') {
|
|
this.update(false);
|
|
}
|
|
}
|
|
|
|
function onUpdateCancel() {
|
|
navigate(Routes.ACCOUNTS);
|
|
}
|
|
|
|
function onSubmit(e) {
|
|
e.preventDefault();
|
|
|
|
let accountProfile = {
|
|
name: name,
|
|
//owner: ownerId,
|
|
initialBalance: initBalance,
|
|
//currency: currencyId,
|
|
externalAccountNumber: extNum,
|
|
}
|
|
|
|
putData(EndPoints.ACCOUNTS + "/" + id, accountProfile).then((result) => {
|
|
let responseJson = result;
|
|
|
|
if (responseJson) {
|
|
console.log(responseJson);
|
|
navigate(Routes.ACCOUNTS);
|
|
}
|
|
}
|
|
);
|
|
}
|
|
|
|
return(
|
|
<div className="row">
|
|
<div className="col-md-4">
|
|
<h3>Edit Account</h3>
|
|
<form onSubmit={onSubmit}>
|
|
<div className="form-group">
|
|
<label className="control-label">Account Name: </label>
|
|
<input className="form-control" type="text" value={name} onChange={(e) => setName(e.target.value)} name="name"
|
|
onKeyDown={onKeyDown} ></input>
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
<label className="control-label">Initial Balance: </label>
|
|
<input className="form-control" type="text" value={initBalance} onChange={(e) => setInitBalance(e.target.value)} name="initBalance"
|
|
onKeyDown={onKeyDown} ></input>
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
<label className="control-label">External Account Number: </label>
|
|
<input className="form-control" type="text" value={extNum} onChange={(e) => setExtNum(e.target.value)} name="extNum"
|
|
onKeyDown={onKeyDown} ></input>
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
<button onClick={onUpdateCancel} className="btn btn-default">Cancel</button>
|
|
<input type="submit" value="Edit" className="btn btn-primary"></input>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |