feature/envelopes #25
@ -0,0 +1,230 @@
|
||||
import React from 'react';
|
||||
import { EndPoints, getData } from "../services/AccessAPI";
|
||||
//import { useNavigate } from "react-router-dom";
|
||||
import { useState } from 'react';
|
||||
import { useEffect } from "react";
|
||||
import DatePicker from 'react-datepicker';
|
||||
import Select from 'react-select';
|
||||
import RowButton from "../ui-elements/table/RowButton";
|
||||
//import '../main.css';
|
||||
|
||||
export default function AutoclassChangeBuilder({ changes, setChangeState }) {
|
||||
useEffect(() => {
|
||||
getFieldInfoData();
|
||||
|
||||
getAllAccountsDataAsSelectInput();
|
||||
getAllCurrencyTypeDataAsSelectInput();
|
||||
}, [])
|
||||
|
||||
const [accounts, setAccounts] = useState([]);
|
||||
const [currencyTypes, setCurrencyTypes] = useState([]);
|
||||
const [changeValues, setChangeValues] = useState(changes);
|
||||
const [fields, setFields] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
function updateChangeValues(changeArray) {
|
||||
setChangeValues(changeArray);
|
||||
setChangeState(changeArray);
|
||||
}
|
||||
|
||||
function getAllAccountsDataAsSelectInput() {
|
||||
getData(EndPoints.ACCOUNTS).then(
|
||||
(result) => {
|
||||
if (result) {
|
||||
setAccounts(result.map(a => {
|
||||
return {
|
||||
value: a.id,
|
||||
label: a.name
|
||||
}
|
||||
}));
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function getAllCurrencyTypeDataAsSelectInput() {
|
||||
getData(EndPoints.CURRENCYTYPES).then(
|
||||
(result) => {
|
||||
if (result) {
|
||||
setCurrencyTypes(result.map(c => {
|
||||
return {
|
||||
value: c.id,
|
||||
label: c.code
|
||||
}
|
||||
}));
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function getFieldInfoData() {
|
||||
getData(EndPoints.AUTOCLASS_FIELDINFO).then(
|
||||
(result) => {
|
||||
if (result) {
|
||||
setFields(result.map(a => {
|
||||
return {
|
||||
value: a,
|
||||
label: a.name
|
||||
}
|
||||
}));
|
||||
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function createChange() {
|
||||
const changeList = [...changeValues];
|
||||
|
||||
let change = {
|
||||
id: Date.now(),
|
||||
field: "",
|
||||
type: "",
|
||||
value: ""
|
||||
}
|
||||
|
||||
changeList.push(change);
|
||||
updateChangeValues(changeList);
|
||||
}
|
||||
|
||||
function setNewField(newField, change) {
|
||||
const changeList = [...changeValues];
|
||||
|
||||
changeList.forEach(c => {
|
||||
if (c.id === change.id) {
|
||||
c.field = newField.name;
|
||||
c.type = newField.type;
|
||||
setNewValue(c.value, change)
|
||||
}
|
||||
});
|
||||
|
||||
updateChangeValues(changeList);
|
||||
}
|
||||
|
||||
function setNewValue(newValue, change) {
|
||||
const changeList = [...changeValues];
|
||||
|
||||
changeList.forEach(c => {
|
||||
if (c.id === change.id) {
|
||||
switch (c.type) {
|
||||
case "INT":
|
||||
c.value = typeof newValue === 'string' ? newValue.replace(/\D/g, '') : '';
|
||||
break;
|
||||
|
||||
case "DECIMAL":
|
||||
if (typeof newValue === 'string') {
|
||||
let m = newValue.match(/[0-9]*\.?[0-9]{0,2}/g)
|
||||
if (m?.length > 0) {
|
||||
c.value = m[0];
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
c.value = '';
|
||||
break;
|
||||
|
||||
case "BOOLEAN":
|
||||
c.value = typeof newValue === 'boolean' ? newValue : true;
|
||||
break;
|
||||
|
||||
case "DATETIME":
|
||||
c.value = isValidDate(newValue) ? newValue : new Date();
|
||||
break;
|
||||
|
||||
default:
|
||||
c.value = newValue;
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
updateChangeValues(changeList);
|
||||
|
||||
return newValue;
|
||||
}
|
||||
|
||||
function removeChange(change) {
|
||||
const changeList = [...changeValues];
|
||||
|
||||
const index = changeList.indexOf(change);
|
||||
if (index > -1)
|
||||
changeList.splice(index, 1);
|
||||
|
||||
updateChangeValues(changeList);
|
||||
}
|
||||
|
||||
function isValidDate(date) {
|
||||
return date && Object.prototype.toString.call(date) === "[object Date]" && !isNaN(date);
|
||||
}
|
||||
|
||||
function renderInput(entry) {
|
||||
switch (entry.type) {
|
||||
case "DATETIME":
|
||||
return (
|
||||
<DatePicker
|
||||
className="form-control"
|
||||
name="value"
|
||||
selected={entry.value}
|
||||
//onSelect={handleDateSelect} //when day is clicked
|
||||
onChange={(date) => setNewValue(date, entry)} //only when value has changed
|
||||
/>
|
||||
)
|
||||
|
||||
case "BOOLEAN":
|
||||
return (
|
||||
<input
|
||||
type="checkbox"
|
||||
name="value"
|
||||
checked={entry.value}
|
||||
onChange={(e) => setNewValue(!entry.value, entry)}
|
||||
className="form-check-input"
|
||||
/>
|
||||
)
|
||||
|
||||
case "ACCOUNT":
|
||||
return (
|
||||
<Select onChange={(e) => setNewValue(e.value, entry)} name="value" options={accounts} isSearchable="true" isLoading={loading} />
|
||||
)
|
||||
|
||||
case "CURRENCYTYPE":
|
||||
return (
|
||||
<Select onChange={(e) => setNewValue(e.value, entry)} name="value" options={currencyTypes} isSearchable="true" isLoading={loading} />
|
||||
)
|
||||
|
||||
default:
|
||||
return (
|
||||
<input className="form-control" type="text" name="value" value={entry.value} onChange={(e) => setNewValue(e.target.value, entry)}></input>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<table className="table table-sm table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Field</th>
|
||||
<th>Value</th>
|
||||
<th><RowButton type="button" className="btn btn-sm btn-outline-primary" text="Create Change" onClick={() => createChange()} /></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
changeValues.map(entry => (
|
||||
<tr key={entry.id}>
|
||||
<td><Select onChange={(e) => setNewField(e.value, entry)} name="field" options={fields} isSearchable="true" isLoading={loading} /></td>
|
||||
<td>
|
||||
{renderInput(entry)}
|
||||
</td>
|
||||
<td><RowButton type="button" className="btn btn-sm btn-outline-danger" text="Delete" onClick={() => removeChange(entry)} /></td>
|
||||
</tr>//*/
|
||||
))
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -8,7 +8,7 @@ import Select from 'react-select';
|
||||
import RowButton from "../ui-elements/table/RowButton";
|
||||
//import '../main.css';
|
||||
|
||||
export default function AutoclassExpressionBuilder({ expressions, setExpressionState, hidden, className, disabled }) {
|
||||
export default function AutoclassExpressionBuilder({ expressions, setExpressionState }) {
|
||||
useEffect(() => {
|
||||
//getExpressionData();
|
||||
getTypeOperatorInfoData();
|
||||
@ -209,10 +209,15 @@ export default function AutoclassExpressionBuilder({ expressions, setExpressionS
|
||||
|
||||
function removeExpression(exp) {
|
||||
const expressionList = [...expressionValues];
|
||||
expressionList.pop(exp);
|
||||
|
||||
const index = expressionList.indexOf(exp);
|
||||
if (index > -1)
|
||||
expressionList.splice(index, 1);
|
||||
|
||||
updateExpressionValues(expressionList);
|
||||
}
|
||||
|
||||
|
||||
function isValidDate(date) {
|
||||
return date && Object.prototype.toString.call(date) === "[object Date]" && !isNaN(date);
|
||||
}
|
||||
|
||||
@ -9,6 +9,7 @@ import DatePicker from 'react-datepicker';
|
||||
|
||||
import "react-datepicker/dist/react-datepicker.css";
|
||||
import AutoclassExpressionBuilder from "./AutoclassExpressionBuilder";
|
||||
import AutoclassChangeBuilder from "./AutoclassChangeBuilder";
|
||||
|
||||
export default function CreateAutoclassrule() {
|
||||
useEffect(() => {
|
||||
@ -28,49 +29,25 @@ export default function CreateAutoclassrule() {
|
||||
function onSubmit(e) {
|
||||
e.preventDefault();
|
||||
|
||||
console.log("Expressions")
|
||||
console.log(prepareExpressions());
|
||||
|
||||
/*
|
||||
{
|
||||
"name": "Yoinker",
|
||||
"accountId": 6,
|
||||
"expressions": [
|
||||
{
|
||||
"transactionField": "AMOUNT",
|
||||
"compareOperator": "GREATER_THAN",
|
||||
"value": "100"
|
||||
}
|
||||
],
|
||||
"changes": [
|
||||
{
|
||||
"field": "EXTERNAL_ID",
|
||||
"value": "You got yoinked!"
|
||||
}
|
||||
],
|
||||
"enabled": true
|
||||
}
|
||||
*/
|
||||
|
||||
let autoclassruleObj = {
|
||||
name: name,
|
||||
//date: date,//"2023-12-23T19:29:12.909Z"
|
||||
accountId: chosenAccount,
|
||||
expressions: prepareExpressions(),
|
||||
changes: changes,
|
||||
changes: prepareChanges(),
|
||||
enabled: enabled,
|
||||
}
|
||||
|
||||
console.log("Prepared payload")
|
||||
console.log(autoclassruleObj)
|
||||
|
||||
/*postData(EndPoints.AUTOCLASS, autoclassruleObj).then((result) => {
|
||||
postData(EndPoints.AUTOCLASS, autoclassruleObj).then((result) => {
|
||||
setLoading(false);
|
||||
let responseJson = result;
|
||||
if (responseJson) {
|
||||
navigate(Routes.ACCOUNTS);
|
||||
}
|
||||
});*/
|
||||
});
|
||||
}
|
||||
|
||||
function prepareExpressions() {
|
||||
@ -80,13 +57,26 @@ export default function CreateAutoclassrule() {
|
||||
expArray.push({
|
||||
transactionField: e.field,
|
||||
compareOperator: e.operator,
|
||||
value: e.value
|
||||
value: e.value.toString()
|
||||
})
|
||||
});
|
||||
|
||||
return expArray;
|
||||
}
|
||||
|
||||
function prepareChanges() {
|
||||
let chgArray = [];
|
||||
|
||||
changes.forEach(c => {
|
||||
chgArray.push({
|
||||
field: c.field,
|
||||
value: c.value.toString()
|
||||
})
|
||||
});
|
||||
|
||||
return chgArray;
|
||||
}
|
||||
|
||||
function getAllAccountsData() {
|
||||
getData(EndPoints.ACCOUNTS).then(
|
||||
(result) => {
|
||||
@ -160,7 +150,7 @@ export default function CreateAutoclassrule() {
|
||||
<br />
|
||||
<div>
|
||||
<h3>Conditions</h3>
|
||||
<p>All of these conditions must be met for the changes to trigger.</p>
|
||||
<p>All of these conditions must be met for the changes to take affect.</p>
|
||||
{expressions.length}
|
||||
</div>
|
||||
|
||||
@ -169,6 +159,18 @@ export default function CreateAutoclassrule() {
|
||||
setExpressionState={setExpressions}
|
||||
/>
|
||||
|
||||
<br />
|
||||
<div>
|
||||
<h3>Changes</h3>
|
||||
<p>All of these changes will occur when the rule triggers.</p>
|
||||
{changes.length}
|
||||
</div>
|
||||
|
||||
<AutoclassChangeBuilder
|
||||
changes={changes}
|
||||
setChangeState={setChanges}
|
||||
/>
|
||||
|
||||
{/*<div className="form-group">
|
||||
<label className="control-label">Date: </label>
|
||||
<DatePicker
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user