<vn-crud-model 
    vn-id="model"
    url="/ticket/api/TicketPackagings"
    fields="['id', 'ticketFk', 'packagingFk', 'quantity', 'created']"
    link="{ticketFk: $ctrl.$stateParams.id}"
    data="packages" on-data-change="$ctrl.onDataChange()"
    auto-load="true">
</vn-crud-model>
<vn-watcher
    vn-id="watcher"
    data="packages"
    form="form">
</vn-watcher>
<form name="form" ng-submit="$ctrl.onSubmit()" compact>
    <vn-card pad-large>
        <vn-title>Packages</vn-title>
        <vn-one>
            <vn-horizontal ng-repeat="package in packages track by $index">
                <vn-autocomplete vn-one
                    vn-focus
                    url="/ticket/api/Packagings/listPackaging"
                    label="Package"
                    show-field="name"
                    value-field="packagingFk"
                    search-function="{or: [{itemFk: {like: '%'+ $search +'%'}}, {'name': {like: '%'+ $search +'%'}}]}"
                    field="package.packagingFk">
                    <tpl-item>{{itemFk}} : {{name}}</tpl-item>
                </vn-autocomplete>
                <vn-textfield
                    vn-one
                    label="Quantity"
                    model="package.quantity"
                    rule="TicketPackaging.quantity">
                </vn-textfield>
                <vn-textfield
                    vn-one
                    label="Added"
                    model="package.created | date: 'dd/MM/yyyy'"
                    disabled="true"
                    ng-readonly="true">
                </vn-textfield>
                <vn-auto pad-medium-top>
                    <vn-icon
                        pointer 
                        medium-grey
                        vn-tooltip="Remove package"
                        icon="delete"
                        ng-click="model.remove($index)">
                    </vn-icon>  
                </vn-one>
            </vn-horizontal>
        </vn-one>
        <vn-one>
            <vn-icon-button
                pointer 
                vn-tooltip="Add package"
                vn-bind="+"
                icon="add_circle"
                ng-click="$ctrl.add()">
            </vn-icon-button>
        </vn-one>
    </vn-card>
    <vn-button-bar>
        <vn-submit label="Save"></vn-submit>
    </vn-button-bar>
</form>