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

<vn-crud-model
    vn-id="model"
    url="/api/Clients/{{$ctrl.$stateParams.id}}/addresses"
    filter="$ctrl.filter"
    limit="10"
    data="$ctrl.addresses"
    auto-load="true">
</vn-crud-model>
<div compact>
    <vn-card pad-large>
        <div
            ng-repeat="address in $ctrl.addresses"
            class="address">
            <a
                ui-sref="client.card.address.edit({addressId: {{::address.id}}})"
                class="pad-small border-solid"
                ng-class="{
                    'item-hightlight': $ctrl.isDefaultAddress(address), 
                    'item-disabled': !address.isActive && !$ctrl.isDefaultAddress(address)
                }"
                translate-attr="{title: 'Edit address'}"
                border-radius>
                <vn-none
                    pad-small-right
                    ng-click="$ctrl.onStarClick($event)">
                    <vn-icon-button
                        icon="star"
                        ng-if="$ctrl.isDefaultAddress(address)">
                    </vn-icon-button>
                    <vn-icon-button
                        ng-if="!address.isActive && !$ctrl.isDefaultAddress(address)"
                        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 
                    style="overflow: hidden; min-width: 14em;">
                    <div class="ellipsize"><b>{{::address.nickname}}</b></div>
                    <div class="ellipsize" name="street">{{::address.street}}</div>
                    <div class="ellipsize">{{::address.city}}, {{::address.province.name}}</div>
                    <div class="ellipsize">
                        {{::address.phone}}<span ng-if="::address.mobile">, </span>
                        {{::address.mobile}}
                    </div>
                    <vn-check
                        vn-one label="Is equalizated"
                        field="address.isEqualizated"
                        disabled="true">
                    </vn-check>
                </vn-one>
                <vn-vertical
                    vn-one
                    ng-if="address.observations.length"
                    border-solid-left
                    pad-medium-h
                    style="height: 6em; overflow: auto;">
                    <vn-one ng-repeat="observation in address.observations track by $index" ng-class="{'pad-small-top': $index}">
                        <b>{{::observation.observationType.description}}:</b> 
                        <span>{{::observation.description}}</span>
                    </vn-one>
                </vn-vertical>
            </a>
        </div>
</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>
    <vn-pagination model="model"></vn-pagination>
</div>