InvenTree/InvenTree/part/templates/part/bom.html

{% extends "part/part_base.html" %}
{% load static %}

{% block css %}

{% endblock %}

{% block details %}

{% include 'part/tabs.html' with tab='bom' %}

<h3>Bill of Materials</h3>

<table class='table table-striped table-condensed' id='bom-table'>
</table>

<div class='container-fluid'>
    <button type='button' class='btn btn-success' id='new-bom-item'>Add BOM Item</button>
</div>

<div class='container-fluid'>
    <button type='button' class='btn btn-basic' id='export-bom'>Export BOM</button>
</div>

{% endblock %}
{% block js_ready %}
{{ block.super }}
    function reloadBom() {
        $("#bom-table").bootstrapTable('refresh');
    }

    $('#bom-table').on('click', '.delete-button', function () {
        var button = $(this);

        launchDeleteForm(
                         button.attr('url'),
                         {
                             success: reloadBom
                         });
    });

    $("#bom-table").on('click', '.edit-button', function () {
        var button = $(this);

        launchModalForm(
                        button.attr('url'),
                        {
                            success: reloadBom
                        });

    });

    $("#new-bom-item").click(function () {
        launchModalForm(
                        "{% url 'bom-item-create' %}",
                        {
                            reload: true,
                            data: {
                                parent: {{ part.id }}
                            }
                        });
    });

    $("#export-bom").click(function () {
        /*
        launchModalForm(
                        "{% url 'bom-export' part.id %}",
                        {
                        });
        */
        //TODO - Select format of the data
        location.href = "{% url 'bom-export' part.id %}";
    });

    $("#bom-table").bootstrapTable({
        sortable: true,
        search: true,
        queryParams: function(p) {
            return {
                part: {{ part.id }}
            }
        },
        columns: [
            {
                field: 'pk',
                title: 'ID',
                visible: false,
            },
            {
                field: 'sub_part',
                title: 'Part',
                sortable: true,
                formatter: function(value, row, index, field) {
                    return renderLink(value.name, value.url);
                }
            },
            {
                field: 'sub_part.description',
                title: 'Description',
            },
            {
                field: 'quantity',
                title: 'Required',
                searchable: false,
                sortable: true
            },
            {
                field: 'sub_part.available_stock',
                title: 'Available',
                searchable: false,
                sortable: true,
                formatter: function(value, row, index, field) {
                    var text = "";
                    if (row.quantity < row.sub_part.available_stock)
                    {
                        text = "<span class='label label-success'>" + value + "</span>";
                    }
                    else
                    {
                        text = "<span class='label label-warning'>" + value + "</span>";
                    }

                    return renderLink(text, row.sub_part.url + "stock/");
                }      
            },
            {
                formatter: function(value, row, index, field) {
                    return editButton(row.url + 'edit') + ' ' + deleteButton(row.url + 'delete');
                }
            }
        ],
        url: "{% url 'api-bom-list' %}"
    });
{% endblock %}