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

<vn-crud-model
    vn-id="model"
    url="Clients/{{$ctrl.$params.id}}/addresses"
    filter="$ctrl.filter"
    limit="10"
    data="$ctrl.addresses"
    auto-load="true">
</vn-crud-model>
<vn-portal slot="topbar">
    <vn-searchbar
        placeholder="Search by consignee"
        info="You can search by consignee id or name"
        model="model"
        expr-builder="$ctrl.exprBuilder(param, value)"
        auto-state="false">
    </vn-searchbar>
</vn-portal>
<vn-data-viewer
    model="model"
    class="vn-w-md">
    <vn-card class="vn-pa-md">
    <div
        ng-repeat="address in $ctrl.addresses"
        class="address">
        <a
            ui-sref="client.card.address.edit({addressId: {{::address.id}}})"
            class="vn-pa-sm border-solid border-radius"
            ng-class="{'item-disabled': !address.isActive}"
            translate-attr="{title: 'Edit consignee'}">
            <vn-none
                class="vn-pr-sm"
                ng-click="$ctrl.onStarClick($event)">
                <vn-icon-button
                    ng-if="$ctrl.isDefaultAddress(address)"
                    icon="star"
                    translate-attr="{title: 'Default address'}">
                </vn-icon-button>
                <vn-icon-button
                    ng-if="!$ctrl.isDefaultAddress(address)"
                    icon="star_border"
                    ng-click="$ctrl.setDefault(address)"
                    translate-attr="{title: 'Set as default'}">
                </vn-icon-button>
            </vn-none>
            <vn-one 
                style="overflow: hidden; min-width: 14em;">
                <div class="ellipsize"><b>{{::address.nickname}} - #{{::address.id}}</b></div>
                <div class="ellipsize" name="street">{{::address.street}}</div>
                <div class="ellipsize">
                    <span ng-show="::address.postalCode">{{::address.postalCode}} -</span> 
                    <span ng-show="::address.city">{{::address.city}},</span> 
                    {{::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"
                    ng-model="address.isEqualizated"
                    disabled="true">
                </vn-check>
            </vn-one>
            <vn-vertical
                vn-one
                ng-if="address.observations.length"
                class="vn-hide-narrow vn-px-md border-solid-left"
                style="height: 6em; overflow: auto;">
                <vn-one ng-repeat="observation in address.observations track by $index" ng-class="{'vn-pt-sm': $index}">
                    <b>{{::observation.observationType.description}}:</b> 
                    <span>{{::observation.description}}</span>
                </vn-one>
            </vn-vertical>
        </a>
    </div>
    </vn-card>
</vn-data-viewer>
<vn-float-button
    vn-bind="+"
    fixed-bottom-right
    vn-tooltip="New consignee"
    ui-sref="client.card.address.create"
    icon="add"
    label="Add">
</vn-float-button>