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

<vn-crud-model
    vn-id="model"
    url="/client/api/Addresses"
    filter="::$ctrl.filter"
    link="{clientFk: $ctrl.$stateParams.id}"
    data="$ctrl.addresses"
    auto-load="true">
</vn-crud-model>
<div compact>
    <vn-card pad-large>
        <vn-horizontal
            ng-repeat="address in $ctrl.addresses"
            class="pad-medium-top"
            style="align-items: center;">
            <vn-one
                border-radius
                class="pad-small border-solid"
                ng-class="{
                    'item-hightlight': $ctrl.isDefaultAddress(address), 
                    'item-disabled': !address.isActive && !$ctrl.isDefaultAddress(address)
                }">
                <vn-horizontal style="align-items: center;">
                    <vn-none pad-medium-h>
                        <vn-icon-button
                            icon="star"
                            ng-if="$ctrl.isDefaultAddress(address)">
                        </vn-icon-button>
                        <vn-icon-button
                            ng-if="!address.isActive"
                            icon="star_border"
                            vn-tooltip="Active first to set as default">
                        </vn-icon-button>                               
                        <vn-icon-button
                            ng-if="address.isActive && !$ctrl.isDefaultAddress(address)"
                            icon="star_border"
                            vn-tooltip="Set as default"
                            ng-click="$ctrl.setDefault(address)">
                        </vn-icon-button>
                    </vn-none>
                    <vn-one border-solid-right>
                        <vn-horizontal>
                            <vn-one>
                                <div><b>{{::address.nickname}}</b></div>
                                <div name="street">{{::address.street}}</div>
                                <div>{{::address.city}}, {{::address.province}}</div>
                                <div>{{::address.phone}}, {{::address.mobile}}</div>
                            </vn-one>
                            <vn-one>
                                <vn-check
                                    vn-one label="Is equalizated"
                                    field="address.isEqualizated"
                                    disabled="true">
                                </vn-check> 
                            </vn-one>
                        </vn-horizontal>
                    </vn-one>
                    <vn-vertical vn-one pad-medium-h>
                        <vn-one ng-repeat="observation in address.observations track by $index" ng-class="{'pad-small-top': $index}">
                            <b margin-medium-right>{{::observation.observationType.description}}:</b>
                            <span>{{::observation.description}}</span>
                        </vn-one>
                    </vn-vertical>
                    <a pad-medium-h vn-tooltip="Edit address" 
                        vn-auto ui-sref="client.card.address.edit({addressId: {{::address.id}}})">
                        <vn-icon-button icon="edit"></vn-icon-button>
                    </a>
                </vn-horizontal>
            </vn-one>
        </vn-horizontal>
    </vn-card>
    <vn-float-button
        vn-bind="+"
        fixed-bottom-right
        vn-tooltip="New address"
        ui-sref="client.card.address.create"
        icon="add"
        label="Add">
    </vn-float-button>
</div>