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

<vn-crud-model vn-id="model"
    url="Clients/consumption"
    link="{clientFk: $ctrl.$params.id}"
    filter="::$ctrl.filter"
    user-params="::$ctrl.filterParams"
    data="sales"
    order="itemTypeFk, itemName, itemSize">
</vn-crud-model>
<vn-portal slot="topbar">
    <vn-searchbar
        panel="vn-consumption-search-panel"
        suggested-filter="$ctrl.filterParams"
        info="Search by item id or name"
        model="model"
        auto-state="false">
    </vn-searchbar>
</vn-portal>
<vn-data-viewer model="model">
    <vn-card class="vn-pa-lg vn-w-lg">
        <section class="header">
            <vn-tool-bar class="vn-mb-md">
                <vn-button disabled="!model.userParams.from || !model.userParams.to"
                    icon="picture_as_pdf"
                    ng-click="$ctrl.showReport()"
                    vn-tooltip="Open as PDF">
                </vn-button>
                <vn-button disabled="!model.userParams.from || !model.userParams.to"
                    icon="email"
                    ng-click="confirm.show()"
                    vn-tooltip="Send to email">
                </vn-button>
                <vn-check 
                    label="Group by item"
                    on-change="$ctrl.changeGrouped(value)">
                </vn-check>
            </vn-tool-bar>
        </section>
        <vn-table model="model">
            <vn-thead>
                <vn-tr>
                    <vn-th field="itemFk" number>Item</vn-th>
                    <vn-th field="ticketFk" number>Ticket</vn-th>
                    <vn-th field="shipped">Fecha</vn-th>
                    <vn-th expand>Description</vn-th>
                    <vn-th field="quantity" number>Quantity</vn-th>
                </vn-tr>
            </vn-thead>
            <vn-tbody>
                <vn-tr
                    ng-repeat="sale in sales">
                    <vn-td number>
                        <span 
                            ng-click="itemDescriptor.show($event, sale.itemFk)"
                            class="link">
                            {{::sale.itemFk}}
                        </span>
                    </vn-td>
                    <vn-td number>
                        <span 
                            ng-click="ticketDescriptor.show($event, sale.ticketFk)"
                            class="link">
                            {{::sale.ticketFk}}
                        </span>
                    </vn-td>
                    <vn-td>{{::sale.shipped | date: 'dd/MM/yyyy'}}</vn-td>
                    <vn-td expand>
                        <vn-fetched-tags
                            max-length="6"
                            item="::sale"
                            name="::sale.concept"
                            sub-name="::sale.subName">
                        </vn-fetched-tags>
                    </vn-td>
                    <vn-td number>{{::sale.quantity | dashIfEmpty}}</vn-td>
                </vn-tr>
            </vn-tbody>
        </vn-table>
    </vn-card>
</vn-data-viewer>
<vn-item-descriptor-popover 
    vn-id="item-descriptor">
</vn-item-descriptor-popover>
<vn-ticket-descriptor-popover 
    vn-id="ticket-descriptor">
</vn-ticket-descriptor-popover>
<vn-confirm 
    vn-id="confirm" 
    question="Please, confirm"
    message="The consumption report will be sent"
    on-accept="$ctrl.sendEmail()">
</vn-confirm>