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="addresses"
    auto-load="true">
</vn-crud-model>
<div compact>
    <vn-card pad-large>
        <vn-title vn-one>Addresses</vn-title>
        <vn-horizontal ng-repeat="address in addresses" class="pad-medium-top" style="align-items: center;">
            <vn-one border-radius class="pad-small border-solid"
                ng-class="{'bg-main': address.isDefaultAddress,'bg-opacity-item': !address.isActive && !address.isDefaultAddress}">
                <vn-horizontal style="align-items: center;">
                    <vn-none pad-medium-h>
                        <vn-icon-button icon="star"
                            ng-if="address.isDefaultAddress">
                        </vn-icon-button>
                        <vn-icon-button icon="star_border"
                            ng-if="!address.isActive"
                            vn-tooltip="Active first to set as default">
                        </vn-icon-button>                               
                        <vn-icon-button orange
                            icon="star_border"
                            vn-tooltip="Set as default"
                            ng-click="$ctrl.setDefault(address)"
                            ng-if="address.isActive && !address.isDefaultAddress">
                        </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>