Invoice Lines Component

markup overrides

Slots

• header - insert extra columns into the table header
• rows - insert extra columns into the table body with the current line as scope
• ps-option - a single product service inside the search dropdown
• ps-selected-option - the selected product service
• item-column-view-mode - caption displayed for the item column in view mode

Extensions

• ProductServiceMappings - Extended additional Product Service Mappings
• CachedPriceResultMappings - Extended additional Cached Price Result Service Mappings
• TaxTypeMappings - Extended additional Tax Type Mappings
• PriceListMappings - Extended additional Price List Mappings
• CustomizeProductServiceSearch - A function that allows modifying the options sent to the server for searching a product service. Use this to change things like the Criteria used for the search.

{
    ProductServiceMappings: [ ... ],
    CachedPriceResultMappings: [ ... ],
    TaxTypeMappings: [ ... ],
    PriceListMappings: [ ... ],
    CustomizeProductServiceSearch : function(options, invoice) { ... }
}

<invoice-lines :property-value="Value" :view-mode="ViewMode" @value-changed = "PropertyEditorValueChanged" :extensions="config.Extensions" >
    <template slot="header">
        <th style="width: 25px"></th>
     </template>
    <template slot="rows" slot-scope="props">
        <td ><i v-if="props.line.Item && props.line.Item.MyobItem" class="fa fa-maxcdn" style="color: #83029A; font-size: 1.2em;"></i></td>
    </template>
    <template slot="ps-option" slot-scope="props">
        <div class="imageColumn">
            <img v-if="props.option.PrimaryImage" :src="props.option.PrimaryImage"> 
            <img v-else src="https://via.placeholder.com/75x75"> 
        </div>
        <div class="infoColumn">
            <div class="truncate-100"></div>
            <div class="truncate-100"></div>
            <div class="truncate-100"></div>
            <div class="truncate-100"><strong>OH:</strong> </div>
        </div>
    </template>
    <template slot="ps-selected-option" slot-scope="props">
        <div class="imageColumn">
            <img v-if="props.option.PrimaryImage" :src="props.option.PrimaryImage"> 
            <img v-else src="https://via.placeholder.com/75x75"> 
        </div>
        <div class="infoColumn">
            <div class="truncate-100"></div>
            <div class="truncate-100"></div>
            <div class="truncate-100"></div>
            <div class="truncate-100"><strong>OH:</strong> </div>
        </div>
    </template>
    <template slot="item-column-view-mode" slot-scope="props">
        <span v-if="props.line.Item"></span>
    </template>
</invoice-lines>