CloudBudget-AngularJS/public/account/account.view.html

<div class="page-header">
    <div class="pull-left">
        <h1>
            {{vm.account.name}} 
            <small ng-show="vm.reference"> - {{vm.account.reference}}</small>
        </h1>
    </div>
    <div class="pull-right">
        <h3 ng-class="{'text-danger': vm.balance <= 0}">
            {{vm.balance | currency }}
            <i class="fa fa-fw fa-balance-scale"></i> 
        </h3>
    </div>
    <div class="clearfix"></div>
</div>
<div class="container-fluid div-striped">
    <div class="row vcenter">
        <form name="form" ng-submit="vm.create()" role="form">
            <div class="col-sm-2">
                <div class="form-group" ng-class="{'has-error': form.date.$dirty && form.date.$error.required}">
                    <input  type="date" class="form-control input-sm" name="date" id="date" 
                            ng-model="vm.entry.date" 
                            placeholder="Date" 
                            required/>
                    <span ng-show="form.date.$dirty && form.date.$error.required" class="help-block">Date is required</span>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="form-group">
                    <select name="category" class="form-control input-sm" ng-change="vm.updateSubCategory()" ng-model="vm.entry.category">
                        <option ng-repeat="category in vm.categories" value="{{category._id}}">{{category.label}}</option>
                    </select>
                </div>
            </div>
            <div class="col-sm-2 hidden-sm">
                <div class="form-group">
                    <select name="sub_category" class="form-control input-sm" ng-hide="!vm.entry.category || vm.sub_categories.length === 0" ng-model="vm.entry.sub_category">
                        <option value=""></option>
                        <option ng-repeat="sub_category in vm.sub_categories" value="{{sub_category._id}}">{{sub_category.label}}</option>
                    </select>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="form-group">
                    <input name="label" id="label" class="form-control input-sm" ng-model="vm.entry.label" placeholder="Label" />                                    
                </div>
            </div>
            <div class="col-sm-2">
                <div class="form-group" ng-class="{'has-error': form.amount.$dirty && form.amout.$error.required}">
                    <input type="number" name="amount" id="amount" class="form-control input-sm" ng-model="vm.entry.amount" placeholder="Amount" required/>                                    
                    <span ng-show="form.amount.$dirty && form.amount.$error.required" class="help-block">Amount is required</span>
                </div>
            </div>
            <div class="col-sm-2">
                <button type="submit" class="btn btn-primary btn-xs" ng-disabled="form.$invalid || vm.dataLoading">
                    <i class="fa fa-fw fa-floppy-o"></i>
                </button>
                <img ng-if="vm.dataLoading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
            </div>
        </form>
    </div>
    <div class="row vcenter" ng-repeat="entry in vm.entries">
        <div class="col-sm-2 small">
            <span   e-form="editEntryForm" e-name="date" 
                    editable-date="entry.date"
                    e-required>{{entry.date | date: "dd/MM/yyyy" }}</span>
        </div>
        <div class="col-sm-2 small">
            <span   e-form="editEntryForm" 
                    e-name="category" 
                    editable-select="entry.category" 
                    e-ng-change="vm.updateSubCategoryEditForm($data)" 
                    e-ng-options="category._id as category.label for category in vm.categories">{{entry.category | category:vm.categories}}</span>
            <span class="visible-sm">
                {{entry.sub_category | sub_category:entry.category:vm.categories}}
            </span>
        </div>
        <div class="col-sm-2 hidden-sm small">
            <span   e-form="editEntryForm" 
                    e-name="sub_category" 
                    editable-select="entry.sub_category" 
                    e-ng-options="category._id as category.label for category in vm.edit_sub_categories"
                    e-ng-hide="vm.disabledSubCategories">{{entry.sub_category | sub_category:entry.category:vm.categories}}</span>
        </div>
        <div class="col-sm-2 small">
            <span e-form="editEntryForm" e-name="label" editable-text="entry.label">{{entry.label}}</span>
        </div>
        <div class="col-sm-2 text-right small">
            <span   e-form="editEntryForm" 
                    e-name="amount" 
                    editable-number="entry.amount" 
                    ng-class="{'text-danger': entry.type === 'BILL'}" 
                    e-required>
                {{entry.amount | currency }}
            </span>
        </div>
        <div class="col-sm-2">
            <form editable-form name="editEntryForm" onbeforesave="vm.edit($data, entry)" ng-show="editEntryForm.$visible" shown="inserted == entry">
                <button type="submit" ng-disabled="editEntryForm.$invalid || editEntryForm.$waiting" title="Edit" class="btn btn-success btn-xs">
                    <i class="fa fa-fw fa-floppy-o"></i>
                </button>
                <button type="button" ng-disabled="editEntryForm.$waiting" title="Cancel" ng-click="editEntryForm.$cancel()" class="btn btn-default btn-xs">
                    <i class="fa fa-fw fa-ban"></i>
                </button>
                <a class="btn btn-danger btn-xs" title="Delete" ng-disabled="editEntryForm.$waiting" ng-click="vm.drop(entry)">
                    <i class="fa fa-fw fa-trash"></i>
                </a>
            </form>
            <a class="btn btn-success btn-xs" ng-click="editEntryForm.$show()" ng-show="!editEntryForm.$visible">
                <i class="fa fa-fw fa-pencil"></i>
            </a>
        </div>
    </div>
</div>