salix/modules/invoiceIn/front/tax/index.html

<vn-crud-model
    vn-id="model"
    url="InvoiceInTaxes"
    fields="[
        'id',
        'invoiceInFk',
        'taxableBase',
        'expenseFk',
        'foreignValue',
        'taxTypeSageFk',
        'transactionTypeSageFk']"
    link="{invoiceInFk: $ctrl.$params.id}"
    data="$ctrl.taxes"
    auto-load="true">
</vn-crud-model>
<vn-crud-model
    url="Expenses"
    data="expenses"
    auto-load="true">
</vn-crud-model>
<vn-watcher
    vn-id="watcher"
    data="$ctrl.taxes"
    form="form">
</vn-watcher>
<form name="form" ng-submit="$ctrl.onSubmit()">
    <vn-card class="vn-pa-lg">
        <vn-horizontal ng-repeat="invoiceInTax in $ctrl.taxes">
            <vn-autocomplete vn-three vn-id="expense" vn-focus
                label="Expense"
                ng-model="invoiceInTax.expenseFk"
                data="expenses"
                show-field="id"
                rule>
                <tpl-item>{{id}}: {{name}}</tpl-item>
                <append>
                    <vn-icon-button 
                        vn-tooltip="Create expense"
                        icon="add_circle"
                        vn-click-stop="createExpense.show()">
                    </vn-icon-button>
                </append>
            </vn-autocomplete>
            <vn-input-number vn-one
                disabled="$ctrl.invoiceIn.currency.code != 'EUR'"
                step="0.01"
                label="Taxable base"
                ng-model="invoiceInTax.taxableBase"
                rule>
            </vn-input-number>
            <vn-autocomplete vn-three
                label="Sage tax"
                ng-model="invoiceInTax.taxTypeSageFk"
                url="SageTaxTypes"
                show-field="vat"
                fields="['id', 'vat', 'rate']"
                search-function="{or: [{id: $search}, {vat: {like: '%'+ $search +'%'}}]}"
                selection="taxRateSelection"
                rule>
                <tpl-item>{{id}}: {{vat}}</tpl-item>
            </vn-autocomplete>
            <vn-autocomplete vn-three
                label="Sage transaction"
                ng-model="invoiceInTax.transactionTypeSageFk"
                url="SageTransactionTypes"
                show-field="transaction"
                search-function="{or: [{id: $search}, {transaction: {like: '%'+ $search +'%'}}]}"
                rule>
                <tpl-item>{{id}}: {{transaction}}</tpl-item>
            </vn-autocomplete>
            <vn-textfield
                disabled="true"
                label="Rate"
                field="$ctrl.taxRate(invoiceInTax, taxRateSelection) | currency:'EUR':2">
            </vn-textfield>
            <vn-input-number
                disabled="$ctrl.invoiceIn.currency.code == 'EUR'"
                label="Foreign value"
                ng-model="invoiceInTax.foreignValue"
                rule>
            </vn-input-number>
            <vn-none>
                <vn-icon-button
                    vn-tooltip="Remove tax"
                    icon="delete"
                    ng-click="model.remove($index)"
                    tabindex="-1">
                </vn-icon-button>
            </vn-none>
        </vn-horizontal>
        <vn-one>
            <vn-icon-button
                vn-bind="+"
                vn-tooltip="Add tax"
                icon="add_circle"
                ng-click="$ctrl.add()">
            </vn-icon-button>
        </vn-one>
    </vn-card>
    <vn-button-bar>       
        <vn-submit
            disabled="!watcher.dataChanged()"
            label="Save">
        </vn-submit>
    </vn-button-bar>
</form>

<!-- Dialog of create expense--> 
<vn-dialog
    vn-id="createExpense"
    on-accept="$ctrl.onResponse()">
    <tpl-body>
        <section>
            <h5 class="vn-py-sm">{{$ctrl.$t('New expense')}}</h5>
            <vn-horizontal>
                <vn-textfield vn-one
                    vn-id="code"
                    label="Code" 
                    ng-model="$ctrl.expense.code"
                    required="true"
                    vn-focus>
                </vn-textfield>
                <vn-check
                    vn-one
                    label="It's a withholding"
                    ng-model="$ctrl.expense.isWithheld">
                </vn-check>
            </vn-horizontal>
            <vn-horizontal>
                <vn-textfield vn-one
                    vn-id="description"
                    label="Description" 
                    ng-model="$ctrl.expense.description"
                    required="true">
                </vn-textfield>
            </vn-horizontal>
        </section>
    </tpl-body>
    <tpl-buttons>
        <input type="button" response="cancel" translate-attr="{value: 'Cancel'}"/>
        <button response="accept" translate>Save</button>
    </tpl-buttons>
</vn-dialog>