src/schedules/views/edit.html
<form role="form" name="scheduleForm" autocomplete="off">
<div class="modal-header">
<h4>{{vm.mode}}</h4>
</div>
<div class="modal-body">
<!-- Schedule Account -->
<div
class="form-group has-feedback"
ng-class="{'has-error': scheduleForm.primaryAccount.$invalid}"
>
<label for="primaryAccount">Account</label>
<input
name="primaryAccount"
class="form-control"
ng-model="vm.transaction.primary_account"
uib-typeahead="account as account.name for account in vm.primaryAccounts($viewValue, 10)"
ng-blur="vm.primaryAccountSelected()"
typeahead-editable="false"
typeahead-select-on-blur="true"
typeahead-template-url="../../og-components/og-favourite/views/typeahead-suggestion.html"
placeholder="Account"
required
og-input-autoselect
autofocus
/>
<span
ng-show="scheduleForm.primaryAccount.$invalid"
class="glyphicon glyphicon-remove form-control-feedback"
></span>
</div>
<!-- Frequency -->
<div
ng-if="vm.mode != 'Enter Transaction'"
class="form-group has-feedback"
ng-class="{'has-error': scheduleForm.frequency.$invalid}"
>
<label for="frequency">Frequency</label>
<input
name="frequency"
class="form-control"
ng-model="vm.schedule.frequency"
uib-typeahead="frequency for frequency in vm.frequencies($viewValue)"
typeahead-editable="false"
typeahead-min-length="0"
typeahead-select-on-blur="true"
placeholder="Frequency"
required
og-input-autoselect
/>
<span
ng-show="scheduleForm.frequency.$invalid"
class="glyphicon glyphicon-remove form-control-feedback"
></span>
</div>
<!-- Transaction/Next Due Date -->
<div
class="form-group has-feedback"
ng-class="{'has-error': scheduleForm.transactionDate.$invalid}"
ng-switch="vm.mode"
>
<label for="transactionDate"
>{{vm.mode == 'Enter Transaction' ? "" : "Next Due "}} Date</label
>
<input
ng-switch-when="Enter Transaction"
id="transactionDate"
name="transactionDate"
class="form-control"
type="date"
ng-model="vm.transaction.transaction_date"
required
/>
<input
ng-switch-default
id="transactionDate"
name="transactionDate"
class="form-control"
type="date"
ng-model="vm.schedule.next_due_date"
required
/>
<span
ng-show="scheduleForm.transactionDate.$invalid"
class="glyphicon glyphicon-remove form-control-feedback"
></span>
</div>
<!-- Payee -->
<div
ng-if="vm.schedule.primary_account.account_type != 'investment'"
class="form-group has-feedback"
ng-class="{'has-warning': vm.isString(vm.transaction.payee), 'has-error': scheduleForm.payee.$invalid}"
>
<label for="payee">Payee</label>
<input
name="payee"
class="form-control"
ng-model="vm.transaction.payee"
uib-typeahead="payee as payee.name for payee in vm.payees($viewValue, 10)"
ng-blur="vm.payeeSelected()"
typeahead-select-on-blur="true"
typeahead-template-url="../../og-components/og-favourite/views/typeahead-suggestion.html"
placeholder="Payee"
required
og-input-autoselect
/>
<span
ng-show="vm.isString(vm.transaction.payee) || scheduleForm.payee.$invalid"
class="glyphicon form-control-feedback"
ng-class="{'glyphicon-warning-sign': vm.isString(vm.transaction.payee), 'glyphicon-remove': scheduleForm.payee.$invalid}"
></span>
</div>
<!-- Security -->
<div
ng-if="vm.transaction.primary_account.account_type == 'investment'"
class="form-group has-feedback"
ng-class="{'has-warning': vm.isString(vm.transaction.security), 'has-error': scheduleForm.security.$invalid}"
>
<label for="security">Security</label>
<input
name="security"
class="form-control"
ng-model="vm.transaction.security"
uib-typeahead="security as security.name for security in vm.securities($viewValue, 10)"
ng-blur="vm.securitySelected()"
typeahead-select-on-blur="true"
typeahead-template-url="../../og-components/og-favourite/views/typeahead-suggestion.html"
placeholder="Security"
required
og-input-autoselect
/>
<span
ng-show="vm.isString(vm.transaction.security) || scheduleForm.security.$invalid"
class="glyphicon form-control-feedback"
ng-class="{'glyphicon-warning-sign': vm.isString(vm.transaction.security), 'glyphicon-remove': scheduleForm.security.$invalid}"
></span>
</div>
<!-- Investment Category -->
<div
ng-if="vm.transaction.primary_account.account_type == 'investment'"
class="form-group has-feedback"
ng-class="{'has-warning': vm.isString(vm.transaction.category), 'has-error': scheduleForm.category.$invalid}"
>
<label for="category">Category</label>
<input
id="category"
name="category"
class="form-control"
ng-model="vm.transaction.category"
uib-typeahead="category as category.name for category in vm.investmentCategories($viewValue)"
ng-blur="vm.investmentCategorySelected()"
typeahead-editable="false"
typeahead-min-length="0"
typeahead-select-on-blur="true"
placeholder="Category"
required
og-input-autoselect
/>
<span
ng-show="vm.isString(vm.transaction.category) || scheduleForm.category.$invalid"
class="glyphicon form-control-feedback"
ng-class="{'glyphicon-warning-sign': vm.isString(vm.transaction.category), 'glyphicon-remove': scheduleForm.category.$invalid}"
></span>
</div>
<!-- Transaction Amount -->
<div
ng-if="vm.transaction.primary_account.account_type != 'investment' || vm.transaction.category.id == 'DividendTo'"
class="form-group has-feedback"
ng-class="{'has-error': scheduleForm.amount.$invalid}"
>
<label for="amount">Amount</label>
<input
id="amount"
name="amount"
class="form-control"
ng-class="{'negative': vm.transaction.amount < -1}"
ng-model="vm.transaction.amount"
placeholder="Transaction Amount"
required
og-input-currency
og-input-autoselect
og-input-calculator
/>
<span
ng-show="scheduleForm.amount.$invalid"
class="glyphicon glyphicon-remove form-control-feedback"
></span>
</div>
<!-- Category -->
<div
ng-if="vm.transaction.primary_account.account_type != 'investment'"
class="form-group has-feedback"
ng-class="{'has-warning': vm.isString(vm.transaction.category), 'has-error': scheduleForm.category.$invalid}"
>
<label for="category">Category</label>
<input
id="category"
name="category"
class="form-control"
ng-model="vm.transaction.category"
uib-typeahead="category as category.name for category in vm.categories($viewValue, 10, null, true)"
ng-blur="vm.categorySelected()"
typeahead-select-on-blur="true"
typeahead-template-url="../../og-components/og-favourite/views/typeahead-suggestion.html"
placeholder="Category"
required
og-input-autoselect
/>
<span
ng-show="vm.isString(vm.transaction.category) || scheduleForm.category.$invalid"
class="glyphicon form-control-feedback"
ng-class="{'glyphicon-warning-sign': vm.isString(vm.transaction.category), 'glyphicon-remove': scheduleForm.category.$invalid}"
></span>
</div>
<!-- Subcategory -->
<div
ng-if="vm.transaction.primary_account.account_type != 'investment' && ['TransferTo', 'TransferFrom', 'SplitTo', 'SplitFrom', 'LoanRepayment', 'Payslip'].indexOf(vm.transaction.category.id) == -1"
class="form-group has-feedback"
ng-class="{'has-warning': vm.isString(vm.transaction.subcategory)}"
>
<label for="subcategory">Subcategory</label>
<input
id="subcategory"
name="subcategory"
class="form-control"
ng-disabled="!(vm.isString(vm.transaction.category) || vm.transaction.category.id > 0)"
ng-model="vm.transaction.subcategory"
uib-typeahead="subcategory as subcategory.name for subcategory in vm.categories($viewValue, 10, vm.transaction.category)"
typeahead-select-on-blur="true"
typeahead-template-url="../../og-components/og-favourite/views/typeahead-suggestion.html"
placeholder="Subcategory"
og-input-autoselect
/>
<span
ng-show="vm.isString(vm.transaction.subcategory)"
class="glyphicon glyphicon-warning-sign form-control-feedback"
></span>
</div>
<!-- Account -->
<div
ng-if="['TransferTo', 'TransferFrom', 'Buy', 'Sell', 'DividendTo'].indexOf(vm.transaction.category.id) != -1"
class="form-group has-feedback"
ng-class="{'has-error': scheduleForm.account.$invalid}"
>
<label for="account">Account</label>
<input
id="account"
name="account"
class="form-control"
ng-model="vm.transaction.account"
uib-typeahead="account as account.name for account in vm.accounts($viewValue, 10)"
typeahead-editable="false"
typeahead-select-on-blur="true"
typeahead-template-url="../../og-components/og-favourite/views/typeahead-suggestion.html"
placeholder="Account"
required
og-input-autoselect
/>
<span
ng-show="scheduleForm.account.$invalid"
class="glyphicon glyphicon-remove form-control-feedback"
></span>
</div>
<!-- Quantity -->
<div
ng-if="vm.transaction.primary_account.account_type == 'investment' && ['TransferTo', 'TransferFrom', 'AddShares', 'RemoveShares', 'Buy', 'Sell'].indexOf(vm.transaction.category.id) != -1"
class="form-group has-feedback"
ng-class="{'has-error': scheduleForm.quantity.$invalid}"
>
<label for="quantity">Quantity</label>
<input
id="quantity"
name="quantity"
class="form-control"
ng-class="{'negative': vm.transaction.quantity < 0}"
ng-model="vm.transaction.quantity"
ng-change="vm.updateInvestmentDetails()"
placeholder="Quantity"
required
og-input-number
og-input-autoselect
og-input-calculator
/>
<span
ng-show="scheduleForm.quantity.$invalid"
class="glyphicon glyphicon-remove form-control-feedback"
></span>
</div>
<!-- Price -->
<div
ng-if="vm.transaction.primary_account.account_type == 'investment' && ['Buy', 'Sell'].indexOf(vm.transaction.category.id) != -1"
class="form-group has-feedback"
ng-class="{'has-error': scheduleForm.price.$invalid}"
>
<label for="price">Price</label>
<input
id="price"
name="price"
class="form-control"
ng-class="{'negative': vm.transaction.price < 0}"
ng-model="vm.transaction.price"
ng-change="vm.updateInvestmentDetails()"
placeholder="Price"
required
og-input-currency="3"
og-input-autoselect
og-input-calculator
/>
<span
ng-show="scheduleForm.price.$invalid"
class="glyphicon glyphicon-remove form-control-feedback"
></span>
</div>
<!-- Commission -->
<div
ng-if="vm.transaction.primary_account.account_type == 'investment' && ['Buy', 'Sell'].indexOf(vm.transaction.category.id) != -1"
class="form-group has-feedback"
ng-class="{'has-error': scheduleForm.commission.$invalid}"
>
<label for="commission">Commission</label>
<input
id="commission"
name="commission"
class="form-control"
ng-class="{'negative': vm.transaction.commission < 0}"
ng-model="vm.transaction.commission"
ng-change="vm.updateInvestmentDetails()"
placeholder="Commission"
required
og-input-currency
og-input-autoselect
og-input-calculator
/>
<span
ng-show="scheduleForm.commission.$invalid"
class="glyphicon glyphicon-remove form-control-feedback"
></span>
</div>
<!-- Investment Amount -->
<div
ng-if="vm.transaction.primary_account.account_type == 'investment' && ['Buy', 'Sell'].indexOf(vm.transaction.category.id) != -1"
class="form-group"
>
<label>Amount</label>
<div ng-class="{'text-danger': vm.transaction.amount < 0}">
{{vm.transaction.amount | currency}}
</div>
</div>
<!-- Subtransactions -->
<div
ng-if="['SplitTo', 'SplitFrom', 'LoanRepayment', 'Payslip'].indexOf(vm.transaction.category.id) != -1"
>
<table class="table table-condensed">
<thead>
<tr>
<th>Category</th>
<th>Subcategory</th>
<th>Memo</th>
<th>Amount</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="subtransaction in vm.transaction.subtransactions">
<td>
<!-- Category -->
<ng-form name="categoryForm">
<div class="form-inline">
<div
class="form-group has-feedback"
ng-class="{'has-warning': vm.isString(subtransaction.category), 'has-error': categoryForm.category.$invalid}"
>
<input
name="category"
class="form-control"
ng-model="subtransaction.category"
uib-typeahead="category as category.name for category in vm.categories($viewValue, 10)"
ng-blur="vm.categorySelected($index)"
typeahead-select-on-blur="true"
typeahead-template-url="../../og-components/og-favourite/views/typeahead-suggestion.html"
placeholder="Category"
required
og-input-autoselect
/>
<span
ng-show="vm.isString(subtransaction.category) || categoryForm.category.$invalid"
class="glyphicon form-control-feedback"
ng-class="{'glyphicon-warning-sign': vm.isString(subtransaction.category), 'glyphicon-remove': categoryForm.category.$invalid}"
></span>
</div>
</div>
</ng-form>
</td>
<td
ng-switch="['TransferTo', 'TransferFrom'].indexOf(subtransaction.category.id)"
>
<ng-form name="accountForm">
<div class="form-inline">
<!-- Subcategory -->
<div
ng-switch-when="-1"
class="form-group has-feedback"
ng-class="{'has-warning': vm.isString(subtransaction.subcategory)}"
>
<input
class="form-control"
ng-disabled="!(vm.isString(subtransaction.category) || subtransaction.category.id > 0)"
ng-model="subtransaction.subcategory"
uib-typeahead="subcategory as subcategory.name for subcategory in vm.categories($viewValue, 10, subtransaction.category)"
typeahead-select-on-blur="true"
typeahead-template-url="../../og-components/og-favourite/views/typeahead-suggestion.html"
placeholder="Subcategory"
og-input-autoselect
/>
<span
ng-show="vm.isString(subtransaction.subcategory)"
class="glyphicon glyphicon-warning-sign form-control-feedback"
></span>
</div>
<!-- Account -->
<div
ng-switch-default
class="form-group has-feedback"
ng-class="{'has-error': accountForm.account.$invalid}"
>
<input
name="account"
class="form-control"
ng-model="subtransaction.account"
uib-typeahead="account as account.name for account in vm.accounts($viewValue, 10)"
typeahead-editable="false"
typeahead-select-on-blur="true"
typeahead-template-url="../../og-components/og-favourite/views/typeahead-suggestion.html"
placeholder="Account"
required
og-input-autoselect
/>
<span
ng-show="accountForm.account.$invalid"
class="glyphicon glyphicon-remove form-control-feedback"
></span>
</div>
</div>
</ng-form>
</td>
<td>
<!-- Memo -->
<input
class="form-control"
ng-model="subtransaction.memo"
placeholder="Memo"
og-input-autoselect
/>
</td>
<td>
<!-- Amount -->
<ng-form name="amountForm">
<div class="form-inline">
<div
class="form-group has-feedback has-action"
ng-class="{'has-error': amountForm.amount.$invalid}"
>
<input
name="amount"
class="form-control text-right"
ng-class="{'negative': (subtransaction.amount * (subtransaction.direction == vm.transaction.direction ? 1 : -1)) < 0}"
ng-model="subtransaction.amount"
placeholder="Amount"
required
og-input-currency
og-input-autoselect
og-input-calculator="right"
/>
<span
ng-show="amountForm.amount.$invalid"
class="glyphicon glyphicon-remove form-control-feedback"
></span>
<span
ng-show="!amountForm.amount.$invalid && vm.transaction.amount - vm.totalAllocated !== 0"
class="form-control-feedback"
><i
class="action glyphicon glyphicon-plus-sign"
uib-tooltip="Add unallocated amount here"
ng-click="vm.addUnallocatedAmount($index)"
></i
></span>
</div>
</div>
</ng-form>
</td>
<td>
<button
class="btn btn-default"
type="button"
ng-click="vm.deleteSubtransaction($index)"
>
<span class="glyphicon glyphicon-trash"></span>
</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<button
class="btn btn-xs btn-success"
type="button"
ng-click="vm.addSubtransaction()"
>
<span class="glyphicon glyphicon-plus"> Add</span>
</button>
</td>
<td colspan="2" class="text-right">Allocated</td>
<td class="text-right">{{vm.totalAllocated | currency}}</td>
</tr>
<tr>
<td
colspan="3"
class="text-right"
ng-class="{'text-danger': vm.transaction.amount - vm.totalAllocated !== 0, 'text-success': vm.transaction.amount - vm.totalAllocated === 0}"
>
Unallocated
</td>
<td
class="text-right"
ng-class="{'text-danger': vm.transaction.amount - vm.totalAllocated !== 0, 'text-success': vm.transaction.amount - vm.totalAllocated === 0}"
>
{{vm.transaction.amount - vm.totalAllocated | currency}}
</td>
</tr>
</tfoot>
</table>
</div>
<!-- Memo -->
<div class="form-group has-feedback has-action">
<label for="memo">Memo</label>
<input
id="memo"
name="memo"
class="form-control"
ng-model="vm.transaction.memo"
placeholder="Memo"
og-input-autoselect
/>
<span
ng-show="['SplitTo', 'SplitFrom', 'LoanRepayment', 'Payslip'].indexOf(vm.transaction.category.id) != -1"
class="form-control-feedback"
>
<i
class="action glyphicon glyphicon-refresh"
uib-tooltip="Use splits"
ng-click="vm.memoFromSubtransactions()"
></i>
</span>
</div>
<div ng-if="vm.mode != 'Enter Transaction'" class="form-group">
<!-- Estimate -->
<div class="checkbox">
<label>
<input type="checkbox" ng-model="vm.schedule.estimate" /> Amount is an
estimate, because it varies
</label>
</div>
<!-- Auto-enter -->
<div class="checkbox">
<label>
<input type="checkbox" ng-model="vm.schedule.auto_enter" />
Automatically enter this transaction on the due date
</label>
</div>
<!-- Default flag -->
<div class="checkbox">
<label>
<input type="checkbox" ng-model="vm.schedule.autoFlag" />
Automatically flag this transaction when entered
</label>
</div>
<div class="form-group" ng-if="vm.schedule.autoFlag">
<label for="flagType">Flag Type</label>
<select
name="flagType"
class="form-control"
ng-model="vm.schedule.flag_type"
>
<option value="followup">Follow Up</option>
<option value="noreceipt">No Receipt</option>
<option value="taxdeductible">Tax Deductible</option>
</select>
</div>
<div class="form-group" ng-if="vm.schedule.autoFlag">
<input
name="flag"
class="form-control"
ng-model="vm.schedule.flag"
placeholder="Flag"
og-input-autoselect
/>
</div>
</div>
</div>
<div class="modal-footer" ng-switch="vm.mode">
<span ng-if="vm.errorMessage" class="text-danger">{{vm.errorMessage}}</span>
<span
ng-if="vm.loadingLastTransaction"
class="pull-left text-muted"
og-loading-spinner="'Finding last transaction for ' + (vm.transaction.payee.name || vm.transaction.security.name)"
></span>
<button class="btn btn-default" type="button" ng-click="vm.cancel()">
Cancel
</button>
<button
ng-switch-when="Enter Transaction"
class="btn btn-primary"
type="button"
ng-click="vm.edit()"
>
<i class="glyphicon glyphicon-calendar"></i> Schedule
</button>
<button
ng-switch-when="Enter Transaction"
class="btn btn-warning"
type="button"
ng-click="vm.skip()"
>
<i class="glyphicon glyphicon-repeat"></i> Skip
</button>
<button
ng-switch-when="Enter Transaction"
class="btn btn-success"
type="submit"
ng-disabled="scheduleForm.$invalid"
ng-click="vm.enter()"
>
<i class="glyphicon glyphicon-ok"></i> Enter
</button>
<button
ng-switch-default
class="btn btn-primary"
type="submit"
ng-disabled="scheduleForm.$invalid"
ng-click="vm.save()"
>
<i class="glyphicon glyphicon-ok"></i> Save
</button>
</div>
</form>