salix/modules/ticket/front/component/index.html

<vn-crud-model 
    vn-id="model"
    url="Sales"
    link="{ticketFk: $ctrl.$params.id}"
    filter="::$ctrl.filter"
    data="components"
    auto-load="true">
</vn-crud-model>
<vn-data-viewer model="model" class="vn-w-xl">
    <vn-card class="vn-mt-md">
        <table class="vn-table">
            <thead>
                <tr>
                    <th number translate>Item</th>
                    <th translate expand>Description</th>
                    <th number translate>Quantity</th>
                    <th translate>Serie</th>
                    <th translate>Components</th>
                    <th number translate>Import</th>
                    <th number translate>Total</th>
                </tr>
            </thead>
            <tbody ng-repeat="sale in components track by sale.id">
                <tr style="height: initial;">
                    <td rowspan="{{::sale.components.length + 1}}" number>
                        <span 
                            ng-click="descriptor.show($event, sale.itemFk, sale.id)"
                            class="link">
                            {{sale.itemFk | zeroFill:6}}
                        </span>
                    </td>
                    <td rowspan="{{::sale.components.length + 1}}" expand>
                        <vn-fetched-tags
                            max-length="6"
                            item="::sale.item"
                            name="::sale.concept"
                            sub-name="::sale.item.subName">
                        </vn-fetched-tags>
                    </td>
                    <td rowspan="{{::sale.components.length + 1}}" number>
                        {{::sale.quantity}}
                    </td>
                </tr>
                <tr 
                    ng-repeat="saleComponent in sale.components track by saleComponent.componentFk"
                    class="components">
                    <td>
                        {{::saleComponent.component.componentType.type}}
                    </td>
                    <td>
                        {{::saleComponent.component.name}}
                    </td>
                    <td number>
                        {{::saleComponent.value | currency: 'EUR':3}}
                    </td>
                    <td number>
                        {{::sale.quantity * saleComponent.value | currency: 'EUR':3}}
                    </td>
                </tr>
            </tbody>
        </table>
    </vn-card>
</vn-data-viewer>
<vn-side-menu side="right">

        <div class="totalBox" style="text-align: left;">
            <h6 style="text-align: center;" translate>Total</h6> 
            <div> <vn-label translate>Base to commission</vn-label> {{$ctrl.base() | currency: 'EUR':2}}  </div>
            <div> <vn-label translate>Total without VAT</vn-label> {{$ctrl.getTotal() | currency: 'EUR': 3}}  </div>
        </div>
        <div class="totalBox" style="text-align: left;">
            <h6 style="text-align: center;" translate>Components</h6>
            <section ng-repeat="component in $ctrl.componentsList">
                <div>
                <vn-label>{{component.name}}</vn-label> {{component.value | currency: 'EUR': 3}}
                </div>
            </section>
        </div>
        <div class="totalBox" style="text-align: left;">
            <h6 style="text-align: center;" translate>Theorical port</h6> 
            <div> <vn-label translate>Price</vn-label> {{$ctrl.theoricalPorts | currency: 'EUR': 2}}  </div>
        </div>

</vn-side-menu>

<vn-item-descriptor-popover
    vn-id="descriptor"
    warehouse-fk="$ctrl.ticket.warehouseFk">
</vn-item-descriptor-popover>