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>

{% if part.has_complete_bom_pricing == False %}
<div class='alert alert-block alert-warning'>
    The BOM for <i>{{ part.full_name }}</i> does not have complete pricing information
</div>
{% endif %}
{% if part.bom_checked_date %}
{% if part.is_bom_valid %}
<div class='alert alert-block alert-info'>
{% else %}
<div class='alert alert-block alert-danger'>
    The BOM for <i>{{ part.full_name }}</i> has changed, and must be validated.<br>
{% endif %}
    The BOM for <i>{{ part.full_name }}</i> was last checked by {{ part.bom_checked_by }} on {{ part.bom_checked_date }}
</div>
{% else %}
<div class='alert alert-danger alert-block'>
    <b>The BOM for <i>{{ part.full_name }}</i> has not been validated.</b>
</div>
{% endif %}

<div id='button-toolbar' class="btn-group" role="group" aria-label="...">
    {% if editing_enabled %}
    <button class='btn btn-default' type='button' title='Remove selected BOM items' id='bom-item-delete'><span class='glyphicon glyphicon-trash'></span></button>
    <button class='btn btn-default' type='button' title='Import BOM data' id='bom-upload'><span class='glyphicon glyphicon-open-file'></span></button>
    <button class='btn btn-default' type='button' title='New BOM Item' id='bom-item-new'><span class='glyphicon glyphicon-plus'></span></button>
    <button class='btn btn-default' type='button' title='Finish Editing' id='editing-finished'><span class='glyphicon glyphicon-ok'></span></button>
    {% else %}
    <button class='btn btn-default' type='button' title='Edit BOM' id='edit-bom'><span class='glyphicon glyphicon-edit'></span></button>
    {% if part.is_bom_valid == False %}
    <button class='btn btn-default' type='button'><span class='glyphicon glyphicon-check'></span></button>
    {% endif %}
    <div class='btn-group' role='group'>
        <div class='dropdown'>
            <button title='Export BOM' class='btn btn-default dropdown-toggle' data-toggle='dropdown' type='button'><span class='glyphicon glyphicon-download-alt'></span></button>
            <ul class='dropdown-menu'>
                <li><a href='#' class='download-bom' format='csv'>CSV</a></li>
                <li><a href='#' class='download-bom' format='xlsx'>XLSX</a></li>
                <li><a href='#' class='download-bom' format='json'>JSON</a></li>
            </ul>
        </div>
    </div>
    {% endif %}
</div>

<table class='table table-striped table-condensed' data-toolbar="#button-toolbar" id='bom-table'>
</table>

{% endblock %}

{% block js_load %}
{{ block.super }}
<script type='text/javascript' src="{% static 'script/inventree/bom.js' %}"></script>
{% endblock %}

{% block js_ready %}
{{ block.super }}

    // Load the BOM table data
    loadBomTable($("#bom-table"), {
        editable: {{ editing_enabled }},
        bom_url: "{% url 'api-bom-list' %}",
        part_url: "{% url 'api-part-list' %}",
        parent_id: {{ part.id }} ,
        sub_part_detail: true,
    });

    linkButtonsToSelection($("#bom-table"),
        [
            "#bom-item-delete",
        ]
    );

    {% if editing_enabled %}
    $("#editing-finished").click(function() {
        location.href = "{% url 'part-bom' part.id %}";
    });

    $("#bom-item-new").click(function () {
        launchModalForm(
            "{% url 'bom-item-create' %}?parent={{ part.id }}",
            {
                success: function() {
                    $("#bom-table").bootstrapTable('refresh');
                },
                secondary: [
                    {
                        field: 'sub_part',
                        label: 'New Part',
                        title: 'Create New Part',
                        url: "{% url 'part-create' %}",
                    },
                ]
            }
        );
    });

    $("#bom-upload").click(function() {
        launchModalForm(
            "{% url 'bom-import' part.id %}",
        );
    });

    {% else %}

    $("#validate-bom").click(function() {
        launchModalForm(
            "{% url 'bom-validate' part.id %}",
            {
                reload: true,
            }
        );
    });

    $("#edit-bom").click(function () {
        location.href = "{% url 'part-bom' part.id %}?edit=True";
    });

    $(".download-bom").click(function () {
        location.href = "{% url 'bom-export' part.id %}?format=" + $(this).attr('format');
    });

    {% endif %}

{% endblock %}