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">
        <div class="tableWrapper">
            <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 class="initial">
                        <td rowspan="{{::sale.components.length + 1}}" number>
                            <span 
                                ng-click="itemDescriptor.show($event, sale.itemFk, sale.id)"
                                class="link">
                                {{sale.itemFk}}
                            </span>
                        </td>
                        <td rowspan="{{::sale.components.length + 1}}" vn-fetched-tags>
                            <div>
                                <vn-one title="{{::sale.item.name}}">{{::sale.item.name}}</vn-one>
                                <vn-one ng-if="::sale.item.subName">
                                    <h3 title="{{::sale.item.subName}}">{{::sale.item.subName}}</h3>
                                </vn-one>
                            </div>
                            <vn-fetched-tags
                                max-length="6"
                                item="::sale.item"
                                tabindex="-1">
                            </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.name}}
                        </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>
        </div>
    </vn-card>
</vn-data-viewer>
<vn-side-menu side="right">
    <div class="totalBox align-left">
        <h6 class="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 align-left">
        <h6 class="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 align-left">
        <h6 class="align-center" translate>Zone breakdown</h6> 
        <div> <vn-label translate>Price</vn-label> {{$ctrl.ticket.zonePrice | currency: 'EUR': 2}}  </div>
        <div> <vn-label translate>Bonus</vn-label> {{$ctrl.ticket.zoneBonus | currency: 'EUR': 2}}  </div>
        <div> <vn-label translate>Zone</vn-label> 
            <span
                title="{{$ctrl.ticket.zone.name}}"
                vn-click-stop="zoneDescriptor.show($event, $ctrl.ticket.zone.id)"
                class="link">
                {{$ctrl.ticket.zone.name | dashIfEmpty}}
            </span>
        </div>
        <div ng-show="$ctrl.ticket.zone.isVolumetric"> 
            <vn-label translate>Volume</vn-label> {{$ctrl.ticketVolume}}  
        </div>
        <div ng-show="!$ctrl.ticket.zone.isVolumetric"> 
            <vn-label translate>Packages</vn-label> {{$ctrl.ticket.packages}}  
        </div>
    </div>
    <div class="totalBox align-left">
            <h6 class="align-center" translate>Theorical cost</h6> 
        <div class="total"> <vn-label translate>Price total</vn-label> {{$ctrl.theoricalCost | currency: 'EUR': 2}}  </div>
    </div>
</vn-side-menu>
<vn-item-descriptor-popover
    vn-id="item-descriptor"
    warehouse-fk="$ctrl.ticket.warehouseFk">
</vn-item-descriptor-popover>
<vn-zone-descriptor-popover 
    vn-id="zone-descriptor">
</vn-zone-descriptor-popover>