scottohara/loot

View on GitHub
src/schedules/views/edit.html

Summary

Maintainability
Test Coverage
<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>