More WIP on React Journal Entry Accounts widget ... getting closer

src/DashAccountingSystem/Content/Scripts/src/components/AccountSelector.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as Logging from '../common/logging';
 import * as _ from 'lodash';
 
 export interface AccountRecord {
@@ -20,12 +19,9 @@ interface AccountSelectorProps {
     value?: number
 }
 
-export class AccountSelector extends React.Component<AccountSelectorProps> {
-    private logger: Logging.ILogger
-
+export class AccountSelector extends React.PureComponent<AccountSelectorProps> {
     constructor(props: AccountSelectorProps) {
         super(props);
-        this.logger = new Logging.Logger('AccountSelector');
         this._onChange = this._onChange.bind(this);
     }
 
@@ -39,7 +35,7 @@ export class AccountSelector extends React.Component<AccountSelectorProps> {
                 id={id}
                 onChange={this._onChange}
                 title="Select an Account"
-                value={value}
+                value={!_.isNil(value) ? value : ''}
             >
                 {_.map(accountList, acctCategoryGroup => {
                     return (

src/DashAccountingSystem/Content/Scripts/src/components/AssetTypeSelector.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import * as _ from 'lodash';
+
+export interface AssetTypeRecord {
+    id: number,
+    name: string
+}
+
+interface AssetTypeSelectorProps {
+    assetTypes: AssetTypeRecord[],
+    id: string,
+    onChange: Function,
+    value?: number
+}
+
+export class AssetTypeSelector extends React.PureComponent<AssetTypeSelectorProps> {
+    constructor(props: AssetTypeSelectorProps) {
+        super(props);
+        this._onChange = this._onChange.bind(this);
+    }
+
+    render() {
+        const { assetTypes, id, value } = this.props;
+
+        return (
+            <select
+                className="selectpicker form-control"
+                data-dropup-auto="false"
+                data-width="auto"
+                id={id}
+                onChange={this._onChange}
+                value={!_.isNil(value) ? value : ''}
+            >
+                {_.map(assetTypes, at => {
+                    const assetTypeAbbreviation = at.name.split(' ')[0];
+                    return (
+                        <option
+                            data-icon={`glyphicon-${assetTypeAbbreviation.toLowerCase()}`}
+                            data-label={at.name}
+                            key={at.id}
+                            value={at.id}
+                        >
+                            {assetTypeAbbreviation}
+                        </option>
+                    )
+                })}
+            </select>
+        );
+    }
+
+    _onChange(event: React.ChangeEvent<HTMLSelectElement>) {
+        const { assetTypes, onChange } = this.props;
+        const selectElement = event.target;
+
+        if (selectElement.selectedIndex === -1)
+            onChange(null);
+
+        const selectedOption = selectElement.selectedOptions[0];
+        const selectedAssetType = _.find(assetTypes, at => at.id === parseInt(selectedOption.value));
+
+        onChange(selectedAssetType);
+    }
+}

src/DashAccountingSystem/Content/Scripts/src/components/JournalEntryAccounts.tsx

@@ -1,13 +1,8 @@
 import * as React from 'react';
 import * as Logging from '../common/logging';
 import * as _ from 'lodash';
-import { HtmlInputType } from './formutils';
 import { AccountCategoryList, AccountSelector, AccountRecord } from './AccountSelector';
-
-interface AssetTypeRecord {
-    id: number,
-    name: string
-}
+import { AssetTypeRecord, AssetTypeSelector } from './AssetTypeSelector';
 
 interface JournalEntryAccountRecord {
     accountId: number,
@@ -30,6 +25,8 @@ interface JournalEntryAccountsState {
     addAccountName?: string,
     addAssetTypeId?: number,
     addAssetTypeName?: string
+    addCredit: number,
+    addDebit: number
 }
 
 export class JournalEntryAccounts extends React.Component<JournalEntryAccountsProps, JournalEntryAccountsState> {
@@ -38,34 +35,98 @@ export class JournalEntryAccounts extends React.Component<JournalEntryAccountsPr
     constructor(props: JournalEntryAccountsProps) {
         super(props);
         this.logger = new Logging.Logger('JournalEntryAccounts');
-        this.logger.info('Lodash Version:', _.VERSION);
+
+        const { assetTypes } = props;
+        const defaultAssetType = assetTypes[0];
 
         this.state = {
-            accounts: props.accounts || []
+            accounts: props.accounts || [],
+            addAssetTypeId: defaultAssetType.id,
+            addAssetTypeName: defaultAssetType.name,
+            addCredit: 0,
+            addDebit: 0
         };
 
         this._onAccountChange = this._onAccountChange.bind(this);
         this._onAddClick = this._onAddClick.bind(this);
+        this._onAddCreditChange = this._onAddCreditChange.bind(this);
+        this._onAddDebitChange = this._onAddDebitChange.bind(this);
+        this._onAssetTypeChange = this._onAssetTypeChange.bind(this);
+        this._onEditCreditChange = this._onEditCreditChange.bind(this);
+        this._onEditDebitChange = this._onEditDebitChange.bind(this);
     }
 
     render() {
-        const { accountsList, accounts } = this.props;
-        const { accounts: existingAccounts, addAccountId } = this.state;
+        const { accountsList, accounts, assetTypes } = this.props;
+        const { accounts: existingAccounts, addAccountId, addAssetTypeId, addCredit, addDebit } = this.state;
 
         const alreadySelectedAccountIds = _.map(existingAccounts, acct => acct.accountId);
+        const canAddNewAccount = !_.isNil(addAccountId) &&
+            !_.isNil(addAssetTypeId) &&
+            ((addCredit || 0) > 0 || (addDebit || 0) > 0);
 
         return (
             <table className="table" id="accounts-table">
                 <thead>
                     <tr>
                         <th className="col-md-5">Account</th>
-                        <th className="col-md-2">Asset Type</th>
+                        <th className="col-md-1">Asset Type</th>
                         <th className="col-md-2">Debit</th>
                         <th className="col-md-2">Credit</th>
-                        <th className="col-md-1"></th>
+                        <th className="col-md-2"></th>
                     </tr>
                 </thead>
                 <tbody>
+                    {_.map(existingAccounts, (account, index) => {
+                        return (
+                            <tr key={account.accountId}>
+                                <td className="col-md-5" style={{ verticalAlign: 'middle', paddingLeft: '20px', paddingTop: '9px' }}>
+                                    <div>
+                                        <input type="hidden" name={`Accounts[${index}].AccountId`} value={account.accountId} />
+                                        <span>{account.accountName}</span>
+                                    </div>
+                                </td>
+                                <td className="col-md-1">
+                                    <div style={{ textAlign: 'right', paddingRight: '11px', paddingTop: '9px' }}>
+                                        <input type="hidden" name={`Accounts[${index}].AssetTypeId`} value={account.assetTypeId} />
+                                        <span>{account.assetTypeName}</span>
+                                    </div>
+                                </td>
+                                <td className="col-md-2">
+                                    <input
+                                        className="form-control"
+                                        min={0}
+                                        name={`Accounts[${index}].Debit`}
+                                        onChange={(e) => this._onEditDebitChange(e, index)}
+                                        step="any"
+                                        type="number"
+                                        style={{ textAlign: 'right' }}
+                                        value={account.debit}
+                                    />
+                                </td>
+                                <td className="col-md-2">
+                                    <input
+                                        className="form-control"
+                                        min={0}
+                                        name={`Accounts[${index}].Credit`}
+                                        onChange={(e) => this._onEditCreditChange(e, index)}
+                                        step="any"
+                                        type="number"
+                                        style={{ textAlign: 'right' }}
+                                        value={account.credit}
+                                    />
+                                </td>
+                                <td className="col-md-2" style={{ textAlign: 'right' }}>
+                                    <button
+                                        className="btn btn-danger"
+                                        onClick={(e) => this._onRemoveAccount(e, index)}
+                                    >
+                                        {'Remove'}
+                                    </button>
+                                </td>
+                            </tr>
+                        );
+                    })}
                 </tbody>
                 <tfoot>
                     <tr>
@@ -78,18 +139,83 @@ export class JournalEntryAccounts extends React.Component<JournalEntryAccountsPr
                                 value={addAccountId}
                             />
                         </td>
-                        <td className="col-md-2"></td>
-                        <td className="col-md-2"></td>
-                        <td className="col-md-2"></td>
-                        <td className="col-md-1"></td>
+                        <td className="col-md-1">
+                            <AssetTypeSelector
+                                assetTypes={assetTypes}
+                                id="asset-type-selector"
+                                onChange={this._onAssetTypeChange}
+                                value={addAssetTypeId}
+                            />
+                        </td>
+                        <td className="col-md-2">
+                            <input
+                                className="form-control"
+                                id="add-debit-amount"
+                                min={0}
+                                onChange={this._onAddDebitChange}
+                                step="any"
+                                type="number"
+                                style={{ textAlign: 'right' }}
+                                value={addDebit}
+                            />
+                        </td>
+                        <td className="col-md-2">
+                            <input
+                                className="form-control"
+                                id="add-credit-amount"
+                                min={0}
+                                onChange={this._onAddCreditChange}
+                                step="any"
+                                style={{ textAlign: 'right' }}
+                                type="number"
+                                value={addCredit}
+                             />
+                        </td>
+                        <td className="col-md-2" style={{ textAlign: 'right' }}>
+                            <button
+                                className="btn btn-success"
+                                disabled={!canAddNewAccount}
+                                id="add-account-button"
+                                onClick={this._onAddClick}
+                            >
+                                {'Add'}
+                            </button>
+                        </td>
                     </tr>
                 </tfoot>
             </table>
         );
     }
 
-    _onAddClick() {
+    _onAddClick(event: React.MouseEvent<HTMLElement>) {
+        event.preventDefault();
+        const { accounts, addAccountId, addAccountName, addAssetTypeId, addAssetTypeName, addDebit, addCredit } = this.state;
+        const newAccount = {
+            accountId: addAccountId,
+            accountName: addAccountName,
+            assetTypeId: addAssetTypeId,
+            assetTypeName: addAssetTypeName,
+            credit: addCredit || 0,
+            debit: addDebit || 0
+        };
+
+        this.setState({
+            accounts: _.concat(accounts, newAccount),
+            addAccountId: null,
+            addAssetTypeName: null,
+            addCredit: 0,
+            addDebit: 0
+        });
+    }
 
+    _onAddCreditChange(event: React.ChangeEvent<HTMLInputElement>) {
+        const newValue = event.target.value;
+        this.setState({ addCredit: _.isNil(newValue) ? null : parseFloat(newValue) });
+    }
+
+    _onAddDebitChange(event: React.ChangeEvent<HTMLInputElement>) {
+        const newValue = event.target.value;
+        this.setState({ addDebit: _.isNil(newValue) ? null : parseFloat(newValue) });
     }
 
     _onAccountChange(selectedAccount: AccountRecord) {
@@ -101,4 +227,22 @@ export class JournalEntryAccounts extends React.Component<JournalEntryAccountsPr
             this.setState({ addAccountId: null, addAccountName: null });
         }
     }
+
+    _onAssetTypeChange(selectedAssetType: AssetTypeRecord) {
+        this.logger.info('Asset Type Changed!  Selected:', selectedAssetType);
+        this.setState({ addAssetTypeId: selectedAssetType.id, addAssetTypeName: selectedAssetType.name });
+    }
+
+    _onEditCreditChange(event: React.ChangeEvent<HTMLInputElement>, index: number) {
+
+    }
+
+    _onEditDebitChange(event: React.ChangeEvent<HTMLInputElement>, index: number) {
+
+    }
+
+    _onRemoveAccount(event: React.MouseEvent<HTMLElement>, index: number) {
+        event.preventDefault();
+        this.logger.info('Remove account at index:', index);
+    }
 }

src/DashAccountingSystem/Content/Scripts/src/components/index.ts

@@ -1,4 +1,4 @@
 export * from './formutils';
 export * from './AccountSelector';
-export * from './HelloWorld';
+export * from './AssetTypeSelector';
 export * from './JournalEntryAccounts';

src/DashAccountingSystem/DashAccountingSystem.csproj

@@ -8,6 +8,7 @@
 
   <ItemGroup>
     <None Remove="Content\Scripts\src\components\AccountSelector.tsx" />
+    <None Remove="Content\Scripts\src\components\AssetTypeSelector.tsx" />
     <None Remove="Content\Scripts\src\components\JournalEntryAccounts.tsx" />
   </ItemGroup>
 
@@ -31,6 +32,7 @@
 
   <ItemGroup>
     <TypeScriptCompile Include="Content\Scripts\src\components\AccountSelector.tsx" />
+    <TypeScriptCompile Include="Content\Scripts\src\components\AssetTypeSelector.tsx" />
     <TypeScriptCompile Include="Content\Scripts\src\components\JournalEntryAccounts.tsx" />
   </ItemGroup>
 

src/DashAccountingSystem/Views/Journal/AddEntry.cshtml

@@ -60,6 +60,11 @@
     else
     {
         <form asp-route="addJournalEntryPost" asp-route-tenantid="@tenant.Id" id="add-entry-form">
+            <div class="row">
+                <div class="col-md-12">
+                    <div asp-validation-summary="All" class="text-danger"></div>
+                </div>
+            </div>
             <div class="row">
                 <div class="col-sm-4 col-md-2 pull-right" style="text-align: right;">
                     <input class="btn btn-success form-control" type="submit" value="Submit" id="submit-button">