salix/modules/client/front/address/edit/index.html

<mg-ajax
    path="Addresses/{{edit.params.addressId}}"
    actions="$ctrl.address = edit.model"
    options="mgEdit">
</mg-ajax>
<vn-watcher
    vn-id="watcher"
    data="$ctrl.address"
    url="Addresses"
    id-field="id"
    form="form">
</vn-watcher>
<vn-crud-model
    vn-id="model"
    url="AddressObservations"
    fields="['id', 'addressFk', 'observationTypeFk', 'description']"
    link="{addressFk: $ctrl.$stateParams.addressId}"
    data="observations"
    auto-load="true">
</vn-crud-model>
<vn-crud-model
    url="ObservationTypes"
    fields="['id', 'description']"
    data="types"
    auto-load="true">
</vn-crud-model>
<form name="form" ng-submit="$ctrl.onSubmit()" class="vn-w-md">
    <vn-card class="vn-pa-lg">
        <vn-horizontal>
            <vn-check
                vn-one
                label="Enabled"
                ng-model="$ctrl.address.isActive">
            </vn-check>
            <vn-check
                vn-one
                label="Is equalizated"
                ng-model="$ctrl.address.isEqualizated"
                vn-acl="administrative, salesAssistant">
            </vn-check> 
        </vn-horizontal>
        <vn-horizontal>
            <vn-textfield
                vn-one
                label="Consignee"
                ng-model="$ctrl.address.nickname"
                rule
                vn-focus>
            </vn-textfield>
            <vn-textfield
                vn-one
                label="Street"
                ng-model="$ctrl.address.street"
                rule>
            </vn-textfield>
        </vn-horizontal>
        <vn-horizontal>
            <vn-autocomplete
                vn-one
                vn-id="province"
                ng-model="$ctrl.address.provinceFk"
                url="Provinces"
                show-field="name"
                value-field="id"
                label="Province">
            </vn-autocomplete>
            <vn-textfield
                vn-one
                label="City"
                ng-model="$ctrl.address.city"
                rule>
            </vn-textfield>
            <!--
            <vn-autocomplete vn-id="town" vn-one
                label="City"
                url="Towns"
                fields="['id', 'name']"
                where="{provinceFk: province.selection.id}"
                show-field="name"
                value-field="name"
                ng-model="$ctrl.address.city">
            </vn-autocomplete>
            <vn-autocomplete vn-one
                url="Postcodes/location"
                fields="['code', 'townFk']"
                ng-model="$ctrl.address.postalCode"
                where="{townFk: town.selection.id}"
                search-function="{code: $search}"
                order="code, townFk"
                show-field="code"
                value-field="code"
                label="Postcode">
            </vn-autocomplete>
            -->
            <vn-textfield
                vn-one
                label="Postcode"
                ng-model="$ctrl.address.postalCode"
                rule>
            </vn-textfield>
            
<!--             <vn-icon-button
                vn-auto
                class="vn-my-md"
                icon="add_circle"
                vn-tooltip="New postcode"
                ng-click="postcode.open()">
            </vn-icon-button>
            -->
        </vn-horizontal>
        <vn-horizontal>
            <vn-autocomplete vn-one
                initial-data="$ctrl.address.agencyMode"
                ng-model="$ctrl.address.agencyModeFk"
                url="AgencyModes/isActive"
                show-field="name"
                value-field="id"
                label="Agency">
            </vn-autocomplete>
            <vn-textfield
                vn-one
                label="Phone"
                ng-model="$ctrl.address.phone"
                rule>
            </vn-textfield>
            <vn-textfield
                vn-one
                label="Mobile"
                ng-model="$ctrl.address.mobile"
                rule>
            </vn-textfield>
        </vn-horizontal>
        <vn-horizontal>
            <vn-autocomplete vn-one
                ng-model="$ctrl.address.incotermsFk"
                url="Incoterms"
                show-field="name"
                value-field="code"
                label="Incoterms">
            </vn-autocomplete>
            <vn-autocomplete vn-one
                ng-model="$ctrl.address.customsAgentFk"
                url="CustomsAgents"
                show-field="fiscalName"
                value-field="id"
                label="Customs agent">
            </vn-autocomplete>
            <vn-icon-button
                vn-auto
                class="vn-my-md"
                icon="add_circle"
                vn-tooltip="New customs agent"
                ng-click="customAgent.show()">
            </vn-icon-button>
        </vn-horizontal>
        <vn-title>Notes</vn-title>
        <div name="observations">
            <vn-horizontal ng-repeat="observation in observations">
                <vn-autocomplete
                    vn-one
                    vn-focus
                    data="types"
                    ng-model="observation.observationTypeFk"
                    show-field="description"
                    label="Observation type"
                    rule="AddressObservation">
                </vn-autocomplete>
                <vn-textfield
                    vn-two
                    label="Description"
                    ng-model="observation.description"
                    rule="AddressObservation">
                </vn-textfield>
                <vn-none>
                    <vn-icon-button
                        vn-tooltip="Remove note"
                        icon="delete"
                        ng-click="$ctrl.removeObservation($index)"
                        tabindex="-1">
                    </vn-icon-button>  
                </vn-none>
            </vn-horizontal>
            <vn-icon-button
                vn-bind="+"
                vn-tooltip="Add note"
                icon="add_circle"
                ng-if="types.length > observations.length" 
                ng-click="model.insert()">
            </vn-icon-button>
        </div>
    </vn-card>
    <vn-button-bar>
        <vn-submit label="Save"></vn-submit>
        <vn-button ng-click="$ctrl.cancel()" label="Cancel"></vn-button>
    </vn-button-bar>
</form>

<!-- New postcode dialog -->
<vn-client-postcode vn-id="postcode" 
    on-response="$ctrl.onResponse($response)">
</vn-client-postcode>

<!-- Create custom agent dialog -->
<vn-dialog class="edit" 
    vn-id="customAgent"
    on-accept="$ctrl.onCustomAgentAccept()">
    <tpl-body>
        <h5 class="vn-py-sm" translate>New customs agent</h5>
        <vn-horizontal>
            <vn-textfield vn-one vn-focus
                label="NIF"
                ng-model="$ctrl.newCustomsAgent.nif"
                required="true">
            </vn-textfield>
            <vn-textfield vn-one
                label="Fiscal name"
                ng-model="$ctrl.newCustomsAgent.fiscalName"
                required="true">
            </vn-textfield>
        </vn-horizontal>
        <vn-horizontal>
            <vn-textfield vn-one
                label="Street"
                ng-model="$ctrl.newCustomsAgent.street">
            </vn-textfield>
            <vn-textfield vn-one
                label="Phone"
                ng-model="$ctrl.newCustomsAgent.phone">
            </vn-textfield>
        </vn-horizontal>
    </tpl-body>
    <tpl-buttons>
        <input type="button" response="cancel" translate-attr="{value: 'Cancel'}"/>
        <button response="accept" translate>Create</button>
    </tpl-buttons>
</vn-dialog>