InvenTree/InvenTree/part/templates/part/detail.html

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

{% block sidebar %}
{% include 'part/part_sidebar.html' %}
{% endblock %}

{% block page_content %}

<div class='panel panel-hidden' id='panel-part-details'>
    <div class='panel-heading'>
        <h4>{% trans "Part Details" %}</h4>
    </div>
    <div class='panel-content'>
        
        <!-- Details Table -->
        <table class="table table-striped table-condensed">
            <col width='25'>
            <tr>
                <td><span class='fas fa-shapes'></span></td>
                <td>{% trans "Name" %}</td>
                <td>{{ part.name }}{% include "clip.html"%}</td>
            </tr>
            <tr>
                <td><span class='fas fa-info-circle'></span></td>
                <td>{% trans "Description" %}</td>
                <td>{{ part.description }}{% include "clip.html"%}</td>
            </tr>
            {% if part.category %}
            <tr>
                <td><span class='fas fa-sitemap'></span></td>
                <td>{% trans "Category" %}</td>
                <td>
                    <a href='{% url "category-detail" part.category.pk %}'>{{ part.category.name }}</a>
                </td>
            </tr>
            {% endif %}
            {% if part.IPN %}
            <tr>
                <td><span class='fas fa-tag'></span></td>
                <td>{% trans "IPN" %}</td>
                <td>{{ part.IPN }}{% include "clip.html"%}</td>
            </tr>
            {% endif %}
            {% if part.revision %}
            <tr>
                <td><span class='fas fa-code-branch'></span></td>
                <td>{% trans "Revision" %}</td>
                <td>{{ part.revision }}{% include "clip.html"%}</td>
            </tr>
            {% endif %}
            {% if part.units %}
            <tr>
                <td></td>
                <td>{% trans "Units" %}</td>
                <td>{{ part.units }}</td>
            </tr>
            {% endif %}
            {% if part.minimum_stock %}
            <tr>
                <td><span class='fas fa-flag'></span></td>
                <td>{% trans "Minimum stock level" %}</td>
                <td>{{ part.minimum_stock }}</td>
            </tr>
            {% endif %}
            {% if part.keywords %}
            <tr>
                <td><span class='fas fa-key'></span></td>
                <td>{% trans "Keywords" %}</td>
                <td>{{ part.keywords }}{% include "clip.html"%}</td>
            </tr>
            {% endif %}
            {% if part.link %}
            <tr>
                <td><span class='fas fa-link'></span></td>
                <td>{% trans "External Link" %}</td>
                <td><a href="{{ part.link }}">{{ part.link }}</a>{% include "clip.html"%}</td>
            </tr>
            {% endif %}
            <tr>
                <td><span class='fas fa-calendar-alt'></span></td>
                <td>{% trans "Creation Date" %}</td>
                <td>
                    {{ part.creation_date }}
                    {% if part.creation_user %}
                    <span class='badge badge-right rounded-pill bg-dark'>{{ part.creation_user }}</span>
                    {% endif %}
                </td>
            </tr>
            {% if part.trackable and part.getLatestSerialNumber %}
            <tr>
                <td><span class='fas fa-hashtag'></span></td>
                <td>{% trans "Latest Serial Number" %}</td>
                <td>{{ part.getLatestSerialNumber }}{% include "clip.html"%}</td>
            </tr>
            {% endif %}
            {% if part.default_location %}
            <tr>
                <td><span class='fas fa-search-location'></span></td>
                <td>{% trans "Default Location" %}</td>
                <td>
                    <a href='{% url "stock-location-detail" part.default_location.pk %}'>{{ part.default_location }}</a>
                </td>
            </tr>
            {% endif %}
            {% if part.default_supplier %}
            <tr>
                <td><span class='fas fa-building'></span></td>
                <td>{% trans "Default Supplier" %}</td>
                <td>{{ part.default_supplier }}</td>
            </tr>
            {% endif %}
        </table>
    </div>
</div>

<div class='panel panel-hidden' id='panel-part-stock'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Part Stock" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                <button type='button' class='btn btn-success' id='new-stock-item' title='{% trans "Create new stock item" %}'>
                    <span class='fas fa-plus-circle'></span> {% trans "New Stock Item" %}
                </button>
            </div>
        </div>
    </div>
    <div class='panel-content'>
        {% if part.is_template %}
        <div class='alert alert-info alert-block'>
            {% blocktrans with full_name=part.full_name%}Showing stock for all variants of <em>{{full_name}}</em>{% endblocktrans %}
        </div>
        {% endif %}
        {% include "stock_table.html" %}
    </div>
</div>

<div class='panel panel-hidden' id='panel-test-templates'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Part Test Templates" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                <div class='btn-group' role='group'>
                    <button type='button' class='btn btn-success' id='add-test-template'>
                        <span class='fas fa-plus-circle'></span> {% trans "Add Test Template" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class='panel-content'>
        <div id='test-button-toolbar'>
            <div class='btn-group' role='group'>
                {% include "filter_list.html" with id="parttests" %}
            </div>
        </div>
        
        <table class='table table-striped table-condensed' data-toolbar='#test-button-toolbar' id='test-template-table'></table>        
    </div>
</div>

<div class='panel panel-hidden' id='panel-purchase-orders'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>    
            <h4>{% trans "Purchase Orders" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                <button class='btn btn-primary' type='button' id='part-order2' title='{% trans "Order part" %}'>
                    <span class='fas fa-shopping-cart'></span> {% trans "Order Part" %}
                </button>
            </div>
        </div>
    </div>
    <div class='panel-content'>
        <div id='po-button-bar'>
            <div class='button-toolbar container-fluid' style='float: right;'>
                {% include "filter_list.html" with id="purchaseorder" %}
            </div>
        </div>
        
        <table class='table table-striped table-condensed po-table' id='purchase-order-table' data-toolbar='#po-button-bar'>
        </table>   
    </div>
</div>

<div class='panel panel-hidden' id='panel-sales-orders'>
    <div class='panel-heading'>
        <h4>{% trans "Sales Orders" %}</h4>
    </div>
    <div class='panel-content'>
        <div id='so-button-bar'>
            <div class='btn-group' role='group'>
                {% include "filter_list.html" with id="salesorder" %}
            </div>
        </div>

        <table class='table table-striped table-condensed po-table' id='sales-order-table' data-toolbar='#so-button-bar'>
        </table>
    </div>

    <div class='panel-heading'>
        <h4>{% trans "Sales Order Allocations" %}</h4>
    </div>
    <div class='panel-content'>
        <table class='table table-striped table-condensed' id='sales-order-allocation-table'></table>
    </div>
</div>

<div class='panel panel-hidden' id='panel-pricing'>
    {% include "part/prices.html" %}
</div>

<div class='panel panel-hidden' id='panel-part-notes'>
    <div class='panel-heading'>
        <div class='row'>
            <div class='col-sm-6'>
                <h4>{% trans "Notes" %}</h4>
            </div>
            <div class='col-sm-6'>
                <div class='btn-group float-right'>
                    <button type='button' id='edit-notes' title='{% trans "Edit Notes" %}' class='btn btn-outline-secondary'>
                        <span class='fas fa-edit'>      
                        </span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class='panel-content'>
        {% if part.notes %}
        {{ part.notes | markdownify }}
        {% endif %}
    </div>
</div>

<div class='panel panel-hidden' id='panel-pricing'>
    <!-- TODO -->
</div>

<div class='panel panel-hidden' id='panel-variants'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Part Variants" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                {% if part.is_template and part.active %}
                <button class='btn btn-success' id='new-variant' title='{% trans "Create new variant" %}'>
                    <span class='fas fa-plus-circle'></span> {% trans "New Variant" %}
                </button>
                {% endif %}
            </div>
        </div>
    </div>
    <div class='panel-content'>
        <div id='variant-button-toolbar'>
            <div class='button-toolbar container-fluid'>
                <div class='btn-group' role='group'>
                </div>
                {% include "filter_list.html" with id="variants" %}
            </div>
        </div>
        
        <table class='table table-striped table-condensed' id='variants-table' data-toolbar='#variant-button-toolbar'>
        </table>
    </div>
</div>

<div class='panel panel-hidden' id='panel-part-parameters'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Parameters" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                {% if roles.part.add %}
                <button title='{% trans "Add new parameter" %}' class='btn btn-success' id='param-create'>
                    <span class='fas fa-plus-circle'></span> {% trans "New Parameter" %}
                </button>
                {% endif %}
            </div>
        </div>
    </div>
    <div class='panel-content'>
        <div id='param-button-toolbar'>
            <div class='button-toolbar container-fluid' style='float: right;'>
            </div>
        </div>
        <table id='parameter-table' class='table table-condensed table-striped' data-toolbar="#param-button-toolbar"></table>
    </div>
</div>

<div class='panel panel-hidden' id='panel-part-attachments'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Attachments" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                {% include "attachment_button.html" %}
            </div>
        </div>
    </div>
    <div class='panel-content'>
        {% include "attachment_table.html" %}
    </div>
</div>

<div class='panel panel-hidden' id='panel-related-parts'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Related Parts" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                {% if roles.part.change %}
                <button class='btn btn-success' type='button' id='add-related-part' title='{% trans "Add Related" %}'>
                    <span class='fas fa-plus-circle'></span> {% trans "Add Related" %}
                </button>
                {% endif %}
            </div>
        </div>
    </div>
    <div class='panel-content'>
        <div id='related-button-bar'>
            <div class='btn-group' role='group'>
                {% include "filter_list.html" with id="related" %}
            </div>
        </div>

        <table id='related-parts-table' class='table table-striped table-condensed' data-toolbar='#related-button-toolbar'></table>
    </div>
</div>

<div class='panel panel-hidden' id='panel-bom'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Bill of Materials" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                <!-- Export menu -->
                <div class='btn-group'>
                    <button id='export-options' title='{% trans "Export actions" %}' class='btn btn-outline-secondary dropdown-toggle' type='button' data-bs-toggle='dropdown'>
                        <span class='fas fa-download'></span> <span class='caret'></span>
                    </button>
                    <ul class='dropdown-menu' role='menu'>
                        <li><a class='dropdown-item' href='#' id='download-bom'><span class='fas fa-file-download'></span> {% trans "Export BOM" %}</a></li>
                        {% if report_enabled %}
                        <li><a class='dropdown-item' href='#' id='print-bom-report'><span class='fas fa-file-pdf'></span> {% trans "Print BOM Report" %}</a></li>
                        {% endif %}
                    </ul>
                </div>
                <!-- Actions menu -->
                <div class='btn-group'>
                    <button id='bom-actions' title='{% trans "BOM actions" %}' class='btn btn-outline-secondary dropdown-toggle' type='button' data-bs-toggle='dropdown'>
                        <span class='fas fa-tools'></span> <span class='caret'></span>
                    </button>
                    <ul class='dropdown-menu' role='menu'>
                        <li><a class='dropdown-item' href='#' id='bom-upload'><span class='fas fa-file-upload'></span> {% trans "Upload BOM" %}</a></li>
                        {% if part.variant_of %}
                        <li><a class='dropdown-item' href='#' id='bom-duplicate'><span class='fas fa-clone'></span> {% trans "Copy BOM" %}</a></li>
                        {% endif %}
                        <li><a class='dropdown-item' href='#' id='validate-bom'><span class='fas fa-clipboard-check icon-green'></span> {% trans "Validate BOM" %}</a></li>
                    </ul>
                </div>
        
                {% if roles.part.change %}
                <button class='btn btn-success' type='button' title='{% trans "New BOM Item" %}' id='bom-item-new'>
                    <span class='fas fa-plus-circle'></span> {% trans "Add BOM Item" %}
                </button>
                {% endif %}
            </div>
        </div>
    </div>
    <div class='panel-content'>
        {% include "part/bom.html" with part=part %}
    </div>
</div>

<div class='panel panel-hidden' id='panel-used-in'>
    <div class='panel-heading'>
        <h4>{% trans "Assemblies" %}</h4>
    </div>
    <div class='panel-content'>
        <div id='assembly-button-toolbar'>
            <div class='btn-group' role='group'>
                {% include "filter_list.html" with id="usedin" %}
            </div>
        </div>
        
        <table class="table table-striped table-condensed" id='used-table' data-toolbar='#assembly-button-toolbar'>
        </table>
    </div>
</div>

<div class='panel panel-hidden' id='panel-build-orders'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Part Builds" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                {% if part.active %}
                {% if roles.build.add %}
                <button class="btn btn-success" id='start-build'>
                    <span class='fas fa-tools'></span> {% trans "New Build Order" %}
                </button>
                {% endif %}
                {% endif %}
            </div>
        </div>
    </div>
    <div class='panel-content'>
        <div id='build-button-toolbar'>
            <div class='btn-group' role='group'>
                {% include "filter_list.html" with id="build" %}
            </div>
        </div>
        
        <table class='table table-striped table-condensed' data-toolbar='#build-button-toolbar' id='build-table'>
        </table>
    </div>

    <div class='panel-heading'>
        <h4>{% trans "Build Order Allocations" %}</h4>
    </div>
    <div class='panel-content'>
        <table class='table table-striped table-condensed' id='build-order-allocation-table'></table>
    </div>
</div>

<div class='panel panel-hidden' id='panel-suppliers'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Part Suppliers" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                <button class="btn btn-success" id='supplier-create'>
                    <span class='fas fa-plus-circle'></span> {% trans "New Supplier Part" %}
                </button>
            </div>
        </div>
    </div>
    <div class='panel-content'>
        <div id='supplier-button-toolbar'>
            <div class='btn-group'>
                <div id='opt-dropdown' class="btn-group">
                    <button id='supplier-part-options' class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">{% trans "Options" %} <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a class='dropdown-item' href='#' id='supplier-part-delete' title='{% trans "Delete supplier parts" %}'>{% trans "Delete" %}</a></li>
                    </ul>
                </div>
            </div>
        </div>
        
        <table class="table table-striped table-condensed" id='supplier-part-table' data-toolbar='#supplier-button-toolbar'>
        </table>
    </div>

    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Part Manufacturers" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                <button class="btn btn-success" id='manufacturer-create'>
                    <span class='fas fa-plus-circle'></span> {% trans "New Manufacturer Part" %}
                </button>
            </div>
        </div>
    </div>
    <div class='panel-content'>
        <div class='panel-content'>
            <div id='manufacturer-button-toolbar'>
                <div class='btn-group'>
                    <div id='opt-dropdown' class="btn-group">
                        <button id='manufacturer-part-options' class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">{% trans "Options" %} <span class="caret"></span></button>
                        <ul class="dropdown-menu">
                            <li><a class='dropdown-item' href='#' id='manufacturer-part-delete' title='{% trans "Delete manufacturer parts" %}'><span class='fas fa-trash-alt icon-red'></span> {% trans "Delete" %}</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <table class='table table-condensed table-striped' id='manufacturer-part-table' data-toolbar='#manufacturer-button-toolbar'></table>
        </div>
    </div>
</div>

{% endblock %}

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

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

    // Load the "suppliers" tab
    onPanelLoad('suppliers', function() {

        function reloadSupplierPartTable() {
            $('#supplier-part-table').bootstrapTable('refresh');
        }
    
        $('#supplier-create').click(function () {
    
            createSupplierPart({
                part: {{ part.pk }},
                onSuccess: reloadSupplierPartTable,
            });
        });
    
        $("#supplier-part-delete").click(function() {
    
            var selections = $("#supplier-part-table").bootstrapTable("getSelections");
    
            var requests = [];
    
            showQuestionDialog(
                '{% trans "Delete Supplier Parts?" %}',
                '{% trans "All selected supplier parts will be deleted" %}',
                {
                    accept: function() {
                        selections.forEach(function(part) {
                            var url = `/api/company/part/${part.pk}/`;
                
                            requests.push(inventreeDelete(url));
                        });
                
                        $.when.apply($, requests).done(function() {
                            reloadSupplierPartTable();
                        });
                    }
                }
            );
        });
    
        loadSupplierPartTable(
            "#supplier-part-table",
            "{% url 'api-supplier-part-list' %}",
            {
                params: {
                    part: {{ part.id }},
                    part_detail: false,
                    supplier_detail: true,
                    manufacturer_detail: true,
                },
            }
        );
    
        linkButtonsToSelection($("#supplier-part-table"), ['#supplier-part-options']);
    
        loadManufacturerPartTable(
            '#manufacturer-part-table',
            "{% url 'api-manufacturer-part-list' %}",
            {
                params: {
                    part: {{ part.id }},
                    part_detail: true,
                    manufacturer_detail: true,
                },
            }
        );
    
        linkButtonsToSelection($("#manufacturer-part-table"), ['#manufacturer-part-options']);
    
        $("#manufacturer-part-delete").click(function() {
    
            var selections = $("#manufacturer-part-table").bootstrapTable("getSelections");
    
            deleteManufacturerParts(selections, {
                onSuccess: function() { 
                    $("#manufacturer-part-table").bootstrapTable("refresh");
                }
            });
        });
    
        $('#manufacturer-create').click(function () {
            
            createManufacturerPart({
                part: {{ part.pk }},
                onSuccess: function() {
                    $("#manufacturer-part-table").bootstrapTable("refresh");
                }
            });
        });
    });

    // Load the "builds" tab
    onPanelLoad("build-orders", function() {

        $("#start-build").click(function() {
            newBuildOrder({
                part: {{ part.pk }},
            });
        });
    
        loadBuildTable($("#build-table"), {
            url: "{% url 'api-build-list' %}",
            params: {
                part: {{ part.id }},
            }
        });

        loadBuildOrderAllocationTable("#build-order-allocation-table", {
            params: {
                part: {{ part.id }},
            }
        });
    
    });

    // Load the "sales orders" tab
    onPanelLoad("sales-orders", function() {
        loadSalesOrderAllocationTable("#sales-order-allocation-table", {
            params: {
                part: {{ part.id }},
            }
        });
    });

    // Load the "used in" tab
    onPanelLoad("used-in", function() {

        loadUsedInTable(
            '#used-table',
            {{ part.pk }},
        );
    });

    // Load the "BOM" tab
    onPanelLoad("bom", function() {
        // Load the BOM table data
        loadBomTable($("#bom-table"), {
            {% if roles.part.change %}
            editable: true,
            {% else %}
            editable: false,
            {% endif %}
            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",
            ]
        );

        $('#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() {

                        // Keep track of each DELETE request
                        var requests = [];

                        rows.forEach(function(row) {
                            requests.push(
                                inventreeDelete(
                                    `/api/bom/${row.pk}/`,
                                )
                            );
                        });

                        // Wait for *all* the requests to complete
                        $.when.apply($, requests).done(function() {
                            location.reload();
                        });
                    }
                }
            );
        });

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

        $('#bom-duplicate').click(function() {
            launchModalForm(
                "{% url 'duplicate-bom' part.id %}",
                {
                    success: function() {
                        $('#bom-table').bootstrapTable('refresh');
                    }
                }
            );
        });

        $("#bom-item-new").click(function () {

            var fields = bomItemFields();

            fields.part.value = {{ part.pk }};
            fields.sub_part.filters = {
                active: true,
            };

            constructForm('{% url "api-bom-list" %}', {
                fields: fields,
                method: 'POST',
                title: '{% trans "Create BOM Item" %}',
                focus: 'sub_part',
                onSuccess: function() {
                    $('#bom-table').bootstrapTable('refresh');
                }
            });
        });

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

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

        {% if report_enabled %}
        $("#print-bom-report").click(function() {
            printBomReports([{{ part.pk }}]);
        });
        {% endif %}
    });

    // Load the "related parts" tab
    onPanelLoad("related-parts", function() {

        loadRelatedPartsTable(
            "#related-parts-table",
            {{ part.pk }}
        );

        $("#add-related-part").click(function() {

            constructForm('{% url "api-part-related-list" %}', {
                method: 'POST',
                fields: {
                    part_1: {
                        hidden: true,
                        value: {{ part.pk }},
                    },
                    part_2: {
                        label: '{% trans "Related Part" %}',
                        filters: {
                            exclude_id: {{ part.pk }},
                            exclude_related: {{ part.pk }},
                        }
                    }
                },
                focus: 'part_2',
                title: '{% trans "Add Related Part" %}',
                onSuccess: function() {
                    $('#related-parts-table').bootstrapTable('refresh');
                }
            });
        });

        $('.delete-related-part').click(function() {
            var button = $(this);
    
            launchModalForm(button.attr('url'), {
                reload: true,
            });
        });
    });

    // Load the "variants" tab
    onPanelLoad("variants", function() {
        loadPartVariantTable($('#variants-table'), {{ part.pk }});

        $('#new-variant').click(function() {
    
            duplicatePart(
                {{ part.pk}},
                {
                    variant: true,
                }
            );
        });
    });

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

    onPanelLoad("purchase-orders", function() {
        loadPurchaseOrderTable($("#purchase-order-table"), {
            url: "{% url 'api-po-list' %}",
            params: {
                part: {{ part.id }},
            },
        });
    });

    onPanelLoad("sales-orders", function() {
        loadSalesOrderTable($("#sales-order-table"), {
            url: "{% url 'api-so-list' %}",
            params: {
                part: {{ part.id }},
            },
        });    
    });


    $("#part-order2").click(function() {
        launchModalForm("{% url 'order-parts' %}", {
            data: {
                part: {{ part.id }},
            },
            reload: true,
        });
    });

    onPanelLoad("test-templates", function() {

        // Load test template table
        loadPartTestTemplateTable(
            $("#test-template-table"),
            {
                part: {{ part.pk }},
                params: {
                    part: {{ part.pk }},
                }
            }
        ); 

        // Callback for "add test template" button
        $("#add-test-template").click(function() {

            constructForm('{% url "api-part-test-template-list" %}', {
                method: 'POST',
                fields: {
                    test_name: {},
                    description: {},
                    required: {},
                    requires_value: {},
                    requires_attachment: {},
                    part: {
                        value: {{ part.pk }},
                        hidden: true,
                    }
                },
                title: '{% trans "Add Test Result Template" %}',
                onSuccess: function() {
                    $("#test-template-table").bootstrapTable("refresh");
                }
            });
        });
    });

    onPanelLoad("part-stock", function() {
        $('#new-stock-item').click(function () {
            createNewStockItem({
                data: {
                    part: {{ part.id }},
                    {% if part.default_location %}
                    location: {{ part.default_location.pk }},
                    {% endif %}
                }
            });
        });
    
        loadStockTable($("#stock-table"), {
            params: {
                part: {{ part.id }},
                location_detail: true,
                part_detail: true,
                supplier_part_detail: true,
            },
            groupByField: 'location',
            buttons: [
                '#stock-options',
            ],
            url: "{% url 'api-stock-list' %}",
        });
    
        $("#stock-export").click(function() {
    
            exportStock({
                part: {{ part.pk }}
            });
        });
    
        $('#item-create').click(function () {
            createNewStockItem({
                data: {
                    part: {{ part.id }},
                }
            });
        });
    });

    $('#edit-notes').click(function() {
        constructForm('{% url "api-part-detail" part.pk %}', {
            fields: {
                notes: {
                    multiline: true,
                }
            },
            title: '{% trans "Edit Part Notes" %}',
            reload: true,
        });
    });

    $(".slidey").change(function() {
        var field = $(this).attr('fieldname');

        var checked = $(this).prop('checked');

        var data = {};

        data[field] = checked;
        // Update the particular field
        inventreePut("{% url 'api-part-detail' part.id %}",
            data,
            {
                method: 'PATCH',
                reloadOnSuccess: true,
            },
        );
    });

    onPanelLoad("part-parameters", function() {
        loadPartParameterTable(
            '#parameter-table', 
            '{% url "api-part-parameter-list" %}',
            {
                params: {
                    part: {{ part.pk }},
                }
            }
        );
    
        $('#param-table').inventreeTable({
        });
    
        {% if roles.part.add %}
        $('#param-create').click(function() {
    
            constructForm('{% url "api-part-parameter-list" %}', {
                method: 'POST',
                fields: {
                    part: {
                        value: {{ part.pk }},
                        hidden: true,
                    },
                    template: {},
                    data: {},
                },
                title: '{% trans "Add Parameter" %}',
                onSuccess: function() {
                    $('#parameter-table').bootstrapTable('refresh');
                }
            });
        });
        {% endif %}
    
        $('.param-edit').click(function() {
            var button = $(this);
    
            launchModalForm(button.attr('url'), {
                reload: true,
            });
        });
    
        $('.param-delete').click(function() {
            var button = $(this);
    
            launchModalForm(button.attr('url'), {
                reload: true,
            });
        });
    });

    onPanelLoad("part-attachments", function() {
        loadAttachmentTable('{% url "api-part-attachment-list" %}', {
            filters: {
                part: {{ part.pk }},
            },
            fields: {
                part: {
                    value: {{ part.pk }},
                    hidden: true
                }
            }
        });
    
        enableDragAndDrop(
            '#attachment-dropzone',
            '{% url "api-part-attachment-list" %}',
            {
                data: {
                    part: {{ part.id }},
                },
                label: 'attachment',
                success: function(data, status, xhr) {
                    reloadAttachmentTable();
                }
            }
        );
    });


    {% default_currency as currency %}

    // history graphs
    {% if price_history %}
        var purchasepricedata = {
                labels: [
                    {% for line in price_history %}'{{ line.date }}',{% endfor %}
                ],
                datasets: [{
                    label: '{% blocktrans %}Purchase Unit Price - {{currency}}{% endblocktrans %}',
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    borderColor: 'rgb(255, 99, 132)',
                    yAxisID: 'y',
                    data: [
                        {% for line in price_history %}{{ line.price|stringformat:".2f" }},{% endfor %}
                    ],
                    borderWidth: 1,
                    type: 'line'
                },
                {% if 'price_diff' in price_history.0 %}
                {
                    label: '{% blocktrans %}Unit Price-Cost Difference - {{currency}}{% endblocktrans %}',
                    backgroundColor: 'rgba(68, 157, 68, 0.2)',
                    borderColor: 'rgb(68, 157, 68)',
                    yAxisID: 'y2',
                    data: [
                        {% for line in price_history %}{{ line.price_diff|stringformat:".2f" }},{% endfor %}
                    ],
                    borderWidth: 1,
                    type: 'line',
                    hidden: true,
                },
                {
                    label: '{% blocktrans %}Supplier Unit Cost - {{currency}}{% endblocktrans %}',
                    backgroundColor: 'rgba(70, 127, 155, 0.2)',
                    borderColor: 'rgb(70, 127, 155)',
                    yAxisID: 'y',
                    data: [
                        {% for line in price_history %}{{ line.price_part|stringformat:".2f" }},{% endfor %}
                    ],
                    borderWidth: 1,
                    type: 'line',
                    hidden: true,
                },
                {% endif %}
                {
                    label: '{% trans "Quantity" %}',
                    backgroundColor: 'rgba(255, 206, 86, 0.2)',
                    borderColor: 'rgb(255, 206, 86)',
                    yAxisID: 'y1',
                    data: [
                        {% for line in price_history %}{{ line.qty|stringformat:"f" }},{% endfor %}
                    ],
                    borderWidth: 1
                }]
            }
        var StockPriceChart = loadStockPricingChart($('#StockPriceChart'), purchasepricedata)
    {% endif %}
    
    {% if bom_parts %}
        var bom_colors =  randomColor({hue: 'green', count: {{ bom_parts|length }} })
        var bomdata = {
            labels: [{% for line in bom_parts %}'{{ line.name }}',{% endfor %}],
            datasets:  [
            {
              label: 'Price',
              data: [{% for line in bom_parts %}{{ line.min_price }},{% endfor %}],
                backgroundColor: bom_colors,
            },
            {% if bom_pie_max %}
            {
                label: 'Max Price',
                data: [{% for line in bom_parts %}{{ line.max_price }},{% endfor %}],
                backgroundColor: bom_colors,
              },
            {% endif %}
            ]
        };
        var BomChart = loadBomChart(document.getElementById('BomChart'), bomdata)
    {% endif %}


    // Internal pricebreaks
    {% settings_value "PART_INTERNAL_PRICE" as show_internal_price %}
    {% if show_internal_price and roles.sales_order.view %}
        initPriceBreakSet(
            $('#internal-price-break-table'),
            {
                part_id: {{part.id}},
                pb_human_name: 'internal price break',
                pb_url_slug: 'internal-price',
                pb_url: '{% url 'api-part-internal-price-list' %}',
                pb_new_btn: $('#new-internal-price-break'),
                pb_new_url: '{% url 'internal-price-break-create' %}',
                linkedGraph: $('#InternalPriceBreakChart'),
            },
        );
    {% endif %}

    // Sales pricebreaks
    {% if part.salable and roles.sales_order.view %}
        initPriceBreakSet(
            $('#price-break-table'),
            {
                part_id: {{part.id}},
                pb_human_name: 'sale price break',
                pb_url_slug: 'sale-price',
                pb_url: "{% url 'api-part-sale-price-list' %}",
                pb_new_btn: $('#new-price-break'),
                pb_new_url: '{% url 'sale-price-break-create' %}',
                linkedGraph: $('#SalePriceBreakChart'),
            },
        );
    {% endif %}

    // Sale price history
    {% if sale_history %}
            var salepricedata = {
                    labels: [
                        {% for line in sale_history %}'{{ line.date }}',{% endfor %}
                    ],
                    datasets: [{
                        label: '{% blocktrans %}Unit Price - {{currency}}{% endblocktrans %}',
                        backgroundColor: 'rgba(255, 99, 132, 0.2)',
                        borderColor: 'rgb(255, 99, 132)',
                        yAxisID: 'y',
                        data: [
                            {% for line in sale_history %}{{ line.price|stringformat:".2f" }},{% endfor %}
                        ],
                        borderWidth: 1,
                    },
                    {
                        label: '{% trans "Quantity" %}',
                        backgroundColor: 'rgba(255, 206, 86, 0.2)',
                        borderColor: 'rgb(255, 206, 86)',
                        yAxisID: 'y1',
                        data: [
                            {% for line in sale_history %}{{ line.qty|stringformat:"f" }},{% endfor %}
                        ],
                        borderWidth: 1,
                        type: 'bar',
                    }]
                }
            var SalePriceChart = loadSellPricingChart($('#SalePriceChart'), salepricedata)
    {% endif %}

    enableSidebar('part');

{% endblock %}