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

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

{% block css %}

{% endblock %}

{% block details %}

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

<h3>{% trans "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 action-button' type='button' title='{% trans "Remove selected BOM items" %}' id='bom-item-delete'><span class='fas fa-trash-alt'></span></button>
    <button class='btn btn-default action-button' type='button' title='{% trans "Import BOM data" %}' id='bom-upload'><span class='fas fa-file-upload'></span></button>
    <button class='btn btn-default action-button' type='button' title='{% trans "New BOM Item" %}' id='bom-item-new'><span class='fas fa-plus-circle'></span></button>
    <button class='btn btn-default action-button' type='button' title='{% trans "Finish Editing" %}' id='editing-finished'><span class='fas fa-check-circle'></span></button>
    {% elif part.active %}
    {% if roles.part.change %}
    <button class='btn btn-default action-button' type='button' title='{% trans "Edit BOM" %}' id='edit-bom'><span class='fas fa-edit'></span></button>
    {% if part.is_bom_valid == False %}
    <button class='btn btn-default action-button' id='validate-bom' title='{% trans "Validate Bill of Materials" %}' type='button'><span class='fas fa-clipboard-check'></span></button>
    {% endif %}
    {% endif %}
    <button title='{% trans "Export Bill of Materials" %}' class='btn btn-default action-button' id='download-bom' type='button'><span class='fas fa-file-download'></span></button>
    {% endif %}
</div>

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

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

{% endblock %}

{% block js_load %}
{{ block.super }}

<!-- jquery-treegrid -->
<script type='text/javascript' src='{% static "treegrid/js/jquery.treegrid.js" %}'></script>
<script type='text/javascript' src='{% static "treegrid/js/jquery.treegrid.bootstrap3.js" %}'></script>

<!-- boostrap-table-treegrid -->
<script type='text/javascript' src='{% static "bootstrap-table/extensions/treegrid/bootstrap-table-treegrid.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-delete').click(function() {

        // Get a list of the selected BOM items
        var rows = $("#bom-table").bootstrapTable('getSelections');

        // TODO - In the future, display (in the dialog) which items are going to be deleted

        showQuestionDialog(
            '{% trans "Delete selected BOM items?" %}',
            '{% trans "All selected BOM items will be deleted" %}',
            {
                accept: function() {

                    // Delete each row one at a time!
                    function deleteRow(idx) {

                        if (idx >= rows.length) {
                            // All selected rows deleted - reload the table
                            $("#bom-table").bootstrapTable('refresh');
                        }

                        var row = rows[idx];

                        var url = `/api/bom/${row.pk}/`;

                        inventreeDelete(
                            url,
                            {
                                complete: function(xhr, status) {
                                    deleteRow(idx + 1);
                                }
                            }
                        )
                    }

                    // Start the deletion!
                    deleteRow(0);
                }
            }
        );
        });

    $('#bom-upload').click(function() {
        location.href = "{% url 'upload-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' %}",
                    },
                ]
            }
        );
    });

    {% 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=1";
    });

    $("#download-bom").click(function () {
        launchModalForm("{% url 'bom-export' part.id %}",
            {
                success: function(response) {
                    location.href = response.url;
                },
            }
        );
    });

    {% endif %}

{% endblock %}