django-bom 1.262__py3-none-any.whl

bom/templates/bom/components/bom-indented.html

@@ -0,0 +1,237 @@
+{# To include this widget, make sure to pass: `parts`, `order_by`, `part`, `part_revision`, `profile` variables  - TODO Could remove part if we pass part revision #}
+{% load static %}
+
+{% block head %}
+    <link rel="stylesheet" type="text/css" href="{% static 'bom/css/treetable-theme.css' %}"/>
+    <link rel="stylesheet" type="text/css" href="{% static 'bom/css/jquery.treetable.css' %}"/>
+    <link rel="stylesheet" type="text/css" href="{% static 'bom/css/tablesorter-theme.materialize.css' %}"/>
+{% endblock %}
+
+<div class="row printer-hide" style="padding-top: 16px;">
+    <div class="col s6">
+        <a class="waves-effect waves-green btn-flat btn-icon-round button-expand tooltipped" data-position="bottom" data-tooltip="Expand BOM" onclick="expandTree()"><i class="material-icons">unfold_more</i></a>
+        <a class="waves-effect waves-green btn-flat btn-icon-round button-collapse tooltipped" data-position="bottom" data-tooltip="Collapse BOM" onclick="collapseTree()"><i class="material-icons">unfold_less</i></a>
+        <a class="waves-effect waves-green btn-flat btn-icon-round button-reset-filter-indented tooltipped" data-position="bottom" data-tooltip="Reset filter" onclick="refreshTableSorterIndented()"><i
+                class="material-icons">refresh</i></a>
+    </div>
+    <div class="col s6 right-align">
+        {% if manage and profile.role == 'A' %}
+            <a class="btn waves-effect waves-green btn-flat red-text"
+               href="{% url 'bom:part-remove-all-subparts' part_id=part.id part_revision_id=part_revision_id %}"
+               onclick="return confirm('Are you sure you want to remove ALL subparts from {{ part.full_part_number }}?')">Remove All Subparts</a>
+        {% else %}
+            <!-- Dropdown Trigger -->
+            <button class="dropdown-trigger-indented waves-effect waves-green btn-flat"
+                    data-target='manage-bom-{{ part.id }}-indented'>
+                <i class="material-icons right">arrow_drop_down</i>Manage
+            </button>
+            <!-- Dropdown Structure -->
+            <ul id='manage-bom-{{ part.id }}-indented' class='dropdown-content'>
+                {% if profile.role == 'A' %}
+                    <li>{% if part_revision.configuration == 'W' %}
+                        <a class="green-text text-lighten-1" href="{% url 'bom:part-manage-bom' part_id=part.id part_revision_id=part_revision.id %}">
+                            <i class="material-icons green-text text-lighten-1">edit</i>Edit BOM</a>
+                    {% else %}
+                        <a class="grey-text text-lighten-1" onclick="alert('Can\'t edit a released part!')"><i class="material-icons grey-text text-lighten-1">edit</i>Edit BOM</a>
+                    {% endif %}
+                    </li>
+                {% endif %}
+                {% if part_revision %}
+                    <li><a class="green-text text-lighten-1" href="{% url 'bom:part-revision-export-bom' part_revision_id=part_revision.id %}">
+                        <i class="material-icons green-text text-lighten-1">cloud_download</i>Download CSV</a>
+                    </li>
+                    <li><a class="green-text text-lighten-1" href="{% url 'bom:part-revision-export-bom-sourcing' part_revision_id=part_revision.id %}">
+                        <i class="material-icons green-text text-lighten-1">cloud_download</i>Download CSV (sourcing)</a>
+                    </li>
+                    <li><a class="green-text text-lighten-1" href="{% url 'bom:part-revision-export-bom-sourcing-detailed' part_revision_id=part_revision.id %}">
+                        <i class="material-icons green-text text-lighten-1">cloud_download</i>Download CSV (sourcing detailed)</a>
+                    </li>
+                {% else %}
+                    <li><a class="green-text text-lighten-1 disabled" href=""><i class="material-icons green-text text-lighten-1">cloud_download</i>Download CSV</a></li>
+                {% endif %}
+            </ul>
+        {% endif %}
+    </div>
+</div>
+<div class="responsive-table-wrapper">
+    <table id="indented-bom" class="highlight part-list tight single-line">
+        <thead>
+        <tr>
+            <th class="text-normal">Level</th>
+            <th class="text-normal">Part No.</th>
+            <th class="text-normal">Qty</th>
+            <th class="text-normal">Reference</th>
+            <th class="text-normal">DNL</th>
+            <th class="text-normal">Synopsis</th>
+            <th class="text-normal">Rev</th>
+            <th class="text-normal">Manufacturer</th>
+            <th class="text-normal">MPN</th>
+            <!-- <th class="text-normal"><i>Ext. Qty</i></th> -->
+            <!-- <th class="text-normal"><i>Order Qty</i></th> -->
+            <th class="text-normal">Seller</th>
+            <th class="text-normal">Price</th>
+            <!-- <th class="text-normal"><i>Ext Cost</i></th> -->
+            <th class="text-normal">NRE</th>
+            {% if profile.role == 'A' and manage %}
+                <th class="sorter-false" data-sorter="false">Manage</th>
+            {% endif %}
+        </tr>
+        </thead>
+        {% for bom_id, subpart in bom_items.items %}
+            {% if subpart.references|length > 25 %}
+                <div id="modal-{{ subpart.part.id }}-references" class="modal">
+                    <div class="modal-content">
+                        <h2>{{ subpart.part.full_part_number }} References</h2>
+                        <p>{{ subpart.references }}</p>
+                    </div>
+                    <div class="modal-footer">
+                        <a href="#!" class="modal-close waves-effect green lighten-1 waves-green btn-flat">Ok</a>
+                    </div>
+                </div>
+            {% endif %}
+            {% if subpart.part_revision.synopsis|length > 75 %}
+                <div id="modal-{{ subpart.part.id }}-synposis" class="modal">
+                    <div class="modal-content">
+                        <h2>{{ subpart.part.full_part_number }} Synposis</h2>
+                        <p>{{ subpart.part_revision.synopsis }}</p>
+                    </div>
+                    <div class="modal-footer">
+                        <a href="#!" class="modal-close waves-effect green lighten-1 waves-green btn-flat">Ok</a>
+                    </div>
+                </div>
+            {% endif %}
+            <tr data-tt-id="{{ bom_id }}"
+                {% if subpart.parent_id %}data-tt-parent-id="{{ subpart.parent_id }}"{% endif %}>
+                <td class="text-normal">{{ subpart.indent_level }}</td>
+                <td class="text-normal"><a href="{% url 'bom:part-info' part_id=subpart.part.id %}">{{ subpart.part.full_part_number }}</a></td>
+                <td class="text-normal">{{ subpart.quantity | floatformat }}</td>
+                <td class="text-normal">{{ subpart.references | default:"-" | truncatechars:25 }}{% if subpart.references|length > 25 %}
+                    <a class="modal-trigger modal-{{ subpart.part.id }}-references" href="#modal-{{ subpart.part.id }}-references">&nbsp;[+]</a>
+                {% endif %}</td>
+                <td class="text-normal">{{ subpart.do_not_load | default:"-" }}</td>
+                <td class="text-normal">{{ subpart.part_revision.synopsis | truncatechars:75 }}{% if subpart.part_revision.synopsis|length > 75 %}
+                    <a class="modal-trigger modal-{{ subpart.part.id }}-synposis" href="#modal-{{ subpart.part.id }}-synposis">&nbsp;[+]</a>
+                {% endif %}
+                <td class="text-normal">{{ subpart.part_revision.revision }}</td>
+                <td class="text-normal">{{ subpart.part.primary_manufacturer_part.manufacturer.name }}
+                    {% if subpart.part.manufacturer_parts.count > 1 %}
+                        <i>(+{{ subpart.part.manufacturer_parts.count }})</i>{% endif %}</td>
+                <td class="text-normal">{% if subpart.part.primary_manufacturer_part.link %}<a href="{{ subpart.part.primary_manufacturer_part.link }}" target="_blank">{% endif %}{{ subpart.part.primary_manufacturer_part.manufacturer_part_number }}{% if subpart.part.primary_manufacturer_part.link %}&nbsp;<i class="material-icons" style="font-size: 14px;">open_in_new</i></a>{% endif %}</td>
+                <td class="text-normal" id="bom-indented-seller-name-{{ subpart.part_revision.id }}">{{ subpart.seller_part.seller.name | default:"-" }}</td>
+                <td class="text-normal" id="bom-indented-unit-cost-{{ subpart.part_revision.id }}">{{ subpart.seller_part.unit_cost | default:"-" }}</td>
+                <td class="text-normal">{{ subpart.seller_part.nre_cost | default:"-" }}</td>
+                {% if subpart.indent_level == 1 and subpart.subpart is not None and manage %}
+                    <td>
+                        <a class='dropdown-trigger' href='#'
+                           data-target='dropdown{{ subpart.subpart.id }}'><i class="material-icons left green-text">more_horiz</i></a>
+                        <!-- Dropdown Structure -->
+                        <ul id='dropdown{{ subpart.subpart.id }}' class='dropdown-content'>
+                            <li><a class="green-text text-lighten-1"
+                                   href="{% url 'bom:part-edit-subpart' part_id=part.id part_revision_id=part_revision_id subpart_id=subpart.subpart.id %}"><i
+                                    class="material-icons green-text text-lighten-1">edit</i>Edit or Change
+                                Rev</a>
+                            <li class="divider" tabindex="-1"></li>
+                            <li><a class="red-text text-lighten-1"
+                                   href="{% url 'bom:part-remove-subpart' part_id=part.id part_revision_id=part_revision.id subpart_id=subpart.subpart.id %}"
+                                   onclick="return confirm('Are you sure you want to remove {{ subpart.part.full_part_number }}?')"><i
+                                    class="material-icons red-text text-lighten-1">delete_forever</i>Remove</a>
+                            </li>
+                        </ul>
+                    </td>
+                {% elif manage %}
+                    <td></td>
+                {% endif %}
+            </tr>
+        {% empty %}
+            <tr>
+                <td colspan="99" style="text-align: center; height: 20vh;"><i>This part does not contain any other parts.</i></td>
+            </tr>
+        {% endfor %}
+    </table>
+</div>
+
+<!-- Tree Table -->
+<script src="{% static 'bom/js/jquery.treetable.js' %}"></script>
+<script>
+    $("#indented-bom").treetable({
+        expandable: true,
+        indent: 2,
+        initialState: 'collapsed',
+        onInitialized: function () {
+            $("#indented-bom").treetable("reveal", {{ part_revision.id }});
+            $('.button-collapse').hide();
+        },
+        onNodeCollapse: function () {
+            $('.button-expand').show();
+        },
+        onNodeExpand: function () {
+            $('.button-collapse').show();
+        }
+    });
+
+    function expandTree() {
+        $('#indented-bom').treetable('expandAll');
+        $('.button-expand').hide();
+        return false;
+    }
+
+    function collapseTree() {
+        $('#indented-bom').treetable('collapseAll');
+        $('#indented-bom').treetable("reveal", {{ part_revision.id }});
+        $('.button-collapse').hide();
+        return false;
+    }
+</script>
+
+<!-- Table Sorter -->
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.2/js/jquery.tablesorter.min.js"></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.2/js/jquery.tablesorter.widgets.min.js"></script>
+<script>
+    $(function () {
+        $("#indented-bom").on('update', initTableSorterIndented);
+        initTableSorterIndented();
+    });
+
+    function initTableSorterIndented() {
+        $('.button-reset-filter-indented').hide();
+        $("#indented-bom").tablesorter({
+            theme: "materialize",
+            headers: {
+                '.manage': {
+                    sorter: false
+                }
+            }
+        }).bind("sortEnd", function (e, t) {
+            $('.button-reset-filter-indented').show();
+        });
+    }
+
+    function refreshTableSorterIndented() {
+        $('#indented-bom').trigger('sortReset');
+        $('.button-reset-filter-indented').hide();
+        return false;
+    }
+</script>
+
+<script>
+    $(document).ready(function () {
+        $('.dropdown-trigger-indented').dropdown({
+            inDuration: 200,
+            outDuration: 225,
+            constrainWidth: false, // Does not change width of dropdown to that of the activator
+            hover: false, // Activate on hover
+            gutter: 0, // Spacing from edge
+            alignment: 'left', // Displays dropdown with edge aligned to the left of button
+            stopPropagation: false, // Stops event propagation
+            coverTrigger: false
+        });
+
+        $('.tooltipped').tooltip();
+    });
+</script>
+
+<script>
+    $(document).ready(function () {
+        $('.modal').modal();
+    });
+</script>

bom/templates/bom/components/manufacturer-part-list.html

@@ -0,0 +1,270 @@
+{# To include this widget, make sure to pass: `manufacturer_parts`, `profile`, (optional, for mouser) `part_revision` variables  #}
+{% load static %}
+
+{% block head %}
+    <link rel="stylesheet" type="text/css" href="{% static 'bom/css/treetable-theme.css' %}"/>
+    <link rel="stylesheet" type="text/css" href="{% static 'bom/css/jquery.treetable.css' %}"/>
+{% endblock %}
+
+<div class="responsive-table-wrapper">
+    <table id="manufacturer-parts" class="highlight tight treetable">
+        <thead>
+        <tr>
+            <th>MPN</th>
+            <th>Manufacturer</th>
+            {% if show_part %}<th>Part</th>{% endif %}
+            <th>Seller</th>
+            <th>PN</th>
+            <th>MOQ</th>
+            <th>MPQ</th>
+            <th>Price</th>
+            <th>Lead Time (days)</th>
+            <th>NRE</th>
+            <th>NCNR</th>
+            <th colspan="2">Manage</th>
+        </tr>
+        </thead>
+        <tbody>
+        {% for manufacturer_part in manufacturer_parts %}
+            <tr id="sourcing-mp-{{ manufacturer_part.id }}" data-tt-id="{{ manufacturer_part.id }}">
+                <td>{% if manufacturer_part.link %}<a href="{{ manufacturer_part.link }}" target="_blank">{% endif %}{{ manufacturer_part.manufacturer_part_number }}{% if manufacturer_part.link %}&nbsp;<i class="material-icons" style="font-size: 14px;">open_in_new</i></a>{% endif %}</td>
+                <td>{% if manufacturer_part.manufacturer %}<a href="{% url 'bom:manufacturer-info' manufacturer_id=manufacturer_part.manufacturer_id %}">{% endif %}{{ manufacturer_part.manufacturer }}{% if manufacturer_part.manufacturer %}</a>{% endif %}</td>
+                {% if show_part %}<td><a href="{% url 'bom:part-info' part_id=manufacturer_part.part_id %}">{{ manufacturer_part.part }}</a></td>{% endif %}
+                <td id="sourcing-mp-{{ manufacturer_part.id }}-name">{% if manufacturer_part.optimal_seller.link %}<a href="{{ manufacturer_part.optimal_seller.link }}" target="_blank">{% endif %}{{ manufacturer_part.optimal_seller.seller.name }}{% if manufacturer_part.optimal_seller.link %}&nbsp;<i class="material-icons" style="font-size: 14px;">open_in_new</i></a>{% endif %}</td>
+                <td id="sourcing-mp-{{ manufacturer_part.id }}-pn">{{ manufacturer_part.optimal_seller.seller_part_number }}</td>
+                <td id="sourcing-mp-{{ manufacturer_part.id }}-moq">{{ manufacturer_part.optimal_seller.minimum_order_quantity }}</td>
+                <td id="sourcing-mp-{{ manufacturer_part.id }}-mpq">{{ manufacturer_part.optimal_seller.minimum_pack_quantity }}</td>
+                <td id="sourcing-mp-{{ manufacturer_part.id }}-cost">{{ manufacturer_part.optimal_seller.unit_cost }}</td>
+                <td id="sourcing-mp-{{ manufacturer_part.id }}-lt">{{ manufacturer_part.optimal_seller.lead_time_days }}</td>
+                <td id="sourcing-mp-{{ manufacturer_part.id }}-nre">{{ manufacturer_part.optimal_seller.nre_cost }}</td>
+                <td id="sourcing-mp-{{ manufacturer_part.id }}-ncnr">{{ manufacturer_part.optimal_seller.ncnr }}</td>
+                {#                                    <td style="min-width: 0px;"></td>#}
+                <td>
+                    {% if profile.role == 'A' %}
+                        <!-- Dropdown Trigger -->
+                        <a class='dropdown-trigger' href='#' data-target='dropdown{{ manufacturer_part.id }}'><i
+                                class="material-icons right green-text lighten-1">more_horiz</i></a>
+                        <!-- Dropdown Structure -->
+                        <ul id='dropdown{{ manufacturer_part.id }}' class='dropdown-content'>
+                            <li><a class="green-text text-lighten-1"
+                                   href="{% url 'bom:manufacturer-part-edit' manufacturer_part_id=manufacturer_part.id %}"><i
+                                    class="material-icons green-text text-lighten-1">edit</i>edit</a></li>
+                            <li><a class="green-text text-lighten-1"
+                                   href="{% url 'bom:manufacturer-part-add-sellerpart' manufacturer_part_id=manufacturer_part.id %}"><i
+                                    class="material-icons green-text text-lighten-1">add</i>add seller part</a>
+                            </li>
+                            <li class="divider" tabindex="-1"></li>
+                            <li><a class="red-text text-lighten-1"
+                                   href="{% url 'bom:manufacturer-part-delete' manufacturer_part_id=manufacturer_part.id %}"><i
+                                    class="material-icons red-text text-lighten-1">delete_forever</i>delete</a>
+                            </li>
+                        </ul>
+                    {% endif %}
+                </td>
+            </tr>
+            {% for seller_part in manufacturer_part.seller_parts %}
+                <tr data-tt-id="0" data-tt-parent-id="{{ manufacturer_part.id }}" {% if forloop.last %}id="sourcing-{{ manufacturer_part.id }}-last"{% endif %}>
+                    <td></td>
+                    <td></td>
+                    <td>{% if seller_part.link %}<a href="{{ seller_part.link }}" target="_blank">{% endif %}{{ seller_part.seller.name }}{% if seller_part.link %}&nbsp;<i class="material-icons" style="font-size: 14px;">open_in_new</i></a>{% endif %}</td>
+                    <td>{{ seller_part.seller_part_number }}</td>
+                    <td>{{ seller_part.minimum_order_quantity }}</td>
+                    <td>{{ seller_part.minimum_pack_quantity }}</td>
+                    <td>{{ seller_part.unit_cost }}</td>
+                    <td>{{ seller_part.lead_time_days }}</td>
+                    <td>{{ seller_part.nre_cost }}</td>
+                    <td>{{ seller_part.ncnr }}</td>
+                    <td>{% if profile.role == 'A' %}
+                        <a href="{% url 'bom:sellerpart-edit' sellerpart_id=seller_part.id %}">edit</a> |
+                        <a href="{% url 'bom:sellerpart-delete' sellerpart_id=seller_part.id %}">delete</a>
+                    {% endif %}</td>
+                </tr>
+            {% empty %}
+                <tr data-tt-id="0" data-tt-parent-id="{{ manufacturer_part.id }}">
+                    <td colspan="99" style="text-align: center;"><i>This manufacturer part has no sellers entered yet.</i></td>
+                </tr>
+            {% endfor %}
+        {% empty %}
+            <tr>
+                <td colspan="99" style="text-align: center; height: 20vh;"><i>None found.</i></td>
+            </tr>
+        {% endfor %}
+        </tbody>
+    </table>
+</div>
+
+<script src="{% static 'bom/js/jquery.treetable.js' %}"></script>
+<script>
+    $("#manufacturer-parts").treetable({
+        expandable: true,
+        indent: 2,
+        initialState: 'collapsed',
+    });
+</script>
+
+<!-- Floating Horizontal Scrollbar -->
+<script type="text/javascript" src="{% static 'bom/js/jquery.ba-floatingscrollbar.min.js' %}"></script>
+<script>
+    $(function () {
+        $('.responsive-table-wrapper').floatingScrollbar();
+    });
+</script>
+
+<!-- Match Seller Parts -->
+<script>
+    let partMatchData = {};
+    const mouserImage = '<img height="18" style="padding: 4px 4px 0 4px;" alt="Mouser" title="Via Mouser.com" src="{% static 'bom/img/mouser.png' %}">';
+    let specsUnitCost;
+    let specsEstCostPerOrder;
+    let specsMissingParts;
+    let dataSheet;
+    $(document).ready(function () {
+        {% if part_revision.id and mouser_parts %}
+            $.get("{% url 'json:mouser-part-match-bom' part_revision_id=part_revision.id %}",
+                function (response) {
+                    partMatchData = response['content'];
+                    const errors = response['errors'];
+                    if (errors.length > 0) {
+                        console.error(errors);
+                    } else {
+                        const flatBom = partMatchData['flat_bom'];
+                        const bomParts = flatBom['parts'];
+                        const mouserInfo = flatBom['parts']['{{ part_revision.id }}']['api_info'];
+                        const sourcingParts = mouserInfo['seller_parts'];
+                        const stockParsed = mouserInfo['stock_parsed'];
+                        const optimalSellerPart = flatBom['parts']['{{ part_revision.id }}']['seller_part'];
+                        specsUnitCost = parseFloat(flatBom['unit_cost']).toFixed(4);
+                        specsEstCostPerOrder = parseFloat(flatBom['out_of_pocket_cost']).toFixed(2);
+                        specsMissingParts = flatBom['missing_item_costs'];
+                        dataSheet = mouserInfo['data_sheet'];
+                        mouserStock = mouserInfo['stock'];
+                        const sellerLink = mouserInfo['product_detail_url'];
+                        updateSpecs(specsUnitCost, specsEstCostPerOrder, specsMissingParts, dataSheet, mouserStock, sellerLink);
+                        updateFlat(bomParts);
+                        updateIndented(bomParts);
+                        updateSourcing(sourcingParts, optimalSellerPart, stockParsed);
+                        $("#indented-bom").trigger('update');
+                        $("#flat-bom").trigger('update');
+                    }
+                }
+            );
+        {% endif %}
+    });
+
+    function updateSourcing(sellerParts, optimalSellerPart, stock) {
+        let lastRowDict = {};
+        let mouserOptimizations = 0;
+        if (sellerParts) {
+            sellerParts.forEach((sellerPart, index) => {
+                if (sellerPart['data_source'] === 'Mouser') mouserOptimizations += 1;
+                const manufacturerPartId = parseInt(sellerPart['manufacturer_part']);
+                if (!(manufacturerPartId in lastRowDict)) {
+                    const lastRow = $(`#sourcing-${manufacturerPartId}-last`);
+                    if (lastRow.length === 0) {
+                        lastRowDict[manufacturerPartId] = $(`#sourcing-mp-${manufacturerPartId}`);
+                    } else {
+                        lastRowDict[manufacturerPartId] = lastRow;
+                    }
+                }
+                if (lastRowDict[manufacturerPartId]) {
+                    const pn = sellerPart['seller_part_number'];
+                    const moq = sellerPart['minimum_order_quantity'];
+                    const mpq = sellerPart['minimum_pack_quantity'];
+                    const price = parseFloat(sellerPart['unit_cost']).toFixed(4);
+                    const leadTime = `${sellerPart['lead_time_days']}`;
+                    const nre = parseFloat(sellerPart['nre_cost']).toFixed(4);
+                    const ncnr = "True";
+                    lastRowDict[manufacturerPartId].after(`<tr data-tt-id="${index + 1}" data-tt-parent-id="${manufacturerPartId}"><td></td><td></td><td>${mouserImage} Mouser</td><td>${pn}</td><td>${moq}</td><td>${mpq}</td><td>${price}</td><td>${leadTime}</td><td>${nre}</td><td>${ncnr}</td><td>(${stock} in stock)</td></tr>`)
+                    const lastRow = lastRowDict[manufacturerPartId].closest('tr').next('tr');
+                    lastRowDict[manufacturerPartId] = lastRow;
+                    const parentNode = $("#manufacturer-parts").treetable("node", manufacturerPartId);
+                    $("#manufacturer-parts").treetable("loadBranch", parentNode, lastRow);
+                    $("#manufacturer-parts").treetable("collapseAll");
+                }
+            });
+        }
+        if (optimalSellerPart && optimalSellerPart !== "None") {
+            const mpBaseId = `#sourcing-mp-${optimalSellerPart['manufacturer_part']}`;
+            if (optimalSellerPart['seller'] === null) { // TODO need to fix this to get the seller name via the API
+                $(`${mpBaseId}-name`).text(optimalSellerPart['data_source']).prepend(mouserImage);
+            }
+            $(`${mpBaseId}-pn`).text(optimalSellerPart['seller_part_number']);
+            $(`${mpBaseId}-moq`).text(optimalSellerPart['minimum_order_quantity']);
+            $(`${mpBaseId}-mpq`).text(optimalSellerPart['minimum_pack_quantity']);
+            $(`${mpBaseId}-cost`).text(optimalSellerPart['unit_cost']);
+            $(`${mpBaseId}-lt`).text(optimalSellerPart['lead_time_days']);
+            $(`${mpBaseId}-nre`).text(optimalSellerPart['nre_cost']);
+            $(`${mpBaseId}-ncnr`).text(optimalSellerPart['ncnr']);
+        }
+    }
+
+    function updateSpecs(unitCost, estCostPerOrder, specsMissingParts, dataSheet, mouserStock, sellerLink) {
+        const mouserEstCost = $("#mouser-est-cost");
+        const mouserEstCostPerOrder = $("#mouser-est-cost-per-order");
+        const mouserMissingCosts = $("#mouser-missing-item-costs");
+        const mouserDataSheetWrapperElement = $("#mouser-data-sheet-wrapper");
+        const mouserDataSheetElement = $("#mouser-data-sheet");
+        const mouserStockWrapperElement = $("#mouser-stock-wrapper");
+        const mouserStockElement = $("#mouser-stock");
+        const currencyUnit = "{{ organization.currency }}" === "USD" ? "$" : ""; // Do this right some day...
+        updateSpecElement(mouserEstCost, unitCost, `${currencyUnit}${unitCost}`);
+        updateSpecElement(mouserEstCostPerOrder, estCostPerOrder, `${currencyUnit}${estCostPerOrder}`);
+        updateSpecElement(mouserMissingCosts, specsMissingParts, `${specsMissingParts}`);
+        updateSpecElement(mouserStockElement, mouserStock, `${mouserStock}`, mouserStockWrapperElement, false);
+        mouserStockElement.append(` (<a href="${sellerLink}" target="_blank">view</a>)`)
+
+        if (dataSheet) {
+            mouserDataSheetElement.attr("href", `${dataSheet}`);
+            mouserDataSheetWrapperElement.show();
+        }
+    }
+
+    function updateSpecElement(element, property, text, wrapper = null, hasDefault = true) {
+        if (property != null) {
+            if (hasDefault) {
+                element.text(text + ' ').prepend(mouserImage).next().css('color', '#bdbdbd').prepend('(').append(' without Mouser)');
+            } else {
+                element.text(text).prepend(mouserImage);
+                if (wrapper) {
+                    wrapper.show();
+                }
+            }
+        }
+    }
+
+    function updateIndented(indentedBomParts) {
+        const baseUnitCostId = "#bom-indented-unit-cost-";
+        const baseSellerNameId = "#bom-indented-seller-name-";
+        updateBom(indentedBomParts, baseUnitCostId, baseSellerNameId);
+    }
+
+    function updateFlat(flatBomParts) {
+        const baseUnitCostId = "#bom-flat-unit-cost-";
+        const baseSellerNameId = "#bom-flat-seller-name-";
+        updateBom(flatBomParts, baseUnitCostId, baseSellerNameId);
+    }
+
+    function updateBom(bomParts, baseUnitCostId, baseSellerNameId) {
+        for (const partRevId in bomParts) {
+            if (bomParts.hasOwnProperty(partRevId) && bomParts[partRevId].hasOwnProperty('seller_part') && bomParts[partRevId].hasOwnProperty('api_info')) {
+                const unitCost = parseFloat(bomParts[partRevId]['seller_part']['unit_cost']);
+                const sellerName = bomParts[partRevId]['seller_part']['data_source'];
+                const isMouser = bomParts[partRevId]['seller_part']['seller'] === 'None' || bomParts[partRevId]['seller_part']['seller'] === null;
+                const sellerLink = bomParts[partRevId]['api_info']['product_detail_url'];
+                const sourcingInfo = bomParts[partRevId]['api_info'] !== 'None';
+                const unitCostId = `${baseUnitCostId}${partRevId}`;
+                const unitCostElement = $(unitCostId);
+                const sellerNameId = `${baseSellerNameId}${partRevId}`;
+                const sellerNameElement = $(sellerNameId);
+                if (unitCost && sourcingInfo && sellerLink) {
+                    unitCostElement.text('');
+                    unitCostElement.html(`<a href="${sellerLink}" target="_blank">${unitCost.toFixed(4)}</a>`);
+                } else if (unitCost && sourcingInfo) {
+                    unitCostElement.text(`${unitCost.toFixed(4)}`);
+                }
+                if (unitCost && sourcingInfo && bomParts[partRevId]['seller_part']['data_source'] === 'Mouser') unitCostElement.append(mouserImage);
+                if (isMouser && sellerName) sellerNameElement.text('Mouser');
+            }
+        }
+    }
+</script>

bom/templates/bom/components/seller-part-list.html

@@ -0,0 +1,62 @@
+{# To include this widget, make sure to pass: `manufacturer_parts`, `profile`, (optional, for mouser) `part_revision` variables  #}
+{% load static %}
+
+{% block head %}
+    <link rel="stylesheet" type="text/css" href="{% static 'bom/css/treetable-theme.css' %}"/>
+    <link rel="stylesheet" type="text/css" href="{% static 'bom/css/jquery.treetable.css' %}"/>
+{% endblock %}
+
+<div class="responsive-table-wrapper">
+    <table id="seller-parts" class="highlight tight treetable">
+        <thead>
+        <tr>
+            <th>Part</th>
+            <th>Manufacturer</th>
+            <th>MPN</th>
+            <th>Seller</th>
+            <th>PN</th>
+            <th>MOQ</th>
+            <th>MPQ</th>
+            <th>Price</th>
+            <th>Lead Time (days)</th>
+            <th>NRE</th>
+            <th>NCNR</th>
+            <th colspan="2">Manage</th>
+        </tr>
+        </thead>
+        <tbody>
+            {% for seller_part in seller_parts %}
+                <tr data-tt-id="0" data-tt-parent-id="{{ seller_part.id }}" {% if forloop.last %}id="sourcing-{{ seller_part.id }}-last"{% endif %}>
+                    <td><a href="{% url 'bom:part-info' part_id=seller_part.manufacturer_part.part_id %}">{{ seller_part.manufacturer_part.part }}</a></td>
+                    <td>{% if seller_part.manufacturer_part.manufacturer %}<a href="{% url 'bom:manufacturer-info' manufacturer_id=seller_part.manufacturer_part.manufacturer_id %}">{% endif %}{{ seller_part.manufacturer_part.manufacturer }}{% if seller_part.manufacturer_part.manufacturer %}</a>{% endif %}</td>
+                    <td>{{ seller_part.manufacturer_part.manufacturer_part_number }}</td>
+                    <td>{{ seller_part.seller.name }}</td>
+                    <td>{{ seller_part.seller_part_number }}</td>
+                    <td>{{ seller_part.minimum_order_quantity }}</td>
+                    <td>{{ seller_part.minimum_pack_quantity }}</td>
+                    <td>{{ seller_part.unit_cost }}</td>
+                    <td>{{ seller_part.lead_time_days }}</td>
+                    <td>{{ seller_part.nre_cost }}</td>
+                    <td>{{ seller_part.ncnr }}</td>
+                    <td>{% if profile.role == 'A' %}
+                        <a href="{% url 'bom:sellerpart-edit' sellerpart_id=seller_part.id %}">edit</a> |
+                        <a href="{% url 'bom:sellerpart-delete' sellerpart_id=seller_part.id %}">delete</a>
+                    {% endif %}</td>
+                </tr>
+            {% empty %}
+                <tr data-tt-id="0" data-tt-parent-id="{{ seller_part.id }}">
+                    <td colspan="99" style="text-align: center;"><i>No seller parts found.</i></td>
+                </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>
+
+
+<!-- Floating Horizontal Scrollbar -->
+<script type="text/javascript" src="{% static 'bom/js/jquery.ba-floatingscrollbar.min.js' %}"></script>
+<script>
+    $(function () {
+        $('.responsive-table-wrapper').floatingScrollbar();
+    });
+</script>

bom/templates/bom/create-part.html

@@ -0,0 +1,65 @@
+{% extends 'bom/bom-base.html' %}
+
+{% load static %}
+{% load materializecss %}
+
+{% block head-title %}{{ title }}{% endblock %}
+
+{% block bom-menu %}
+    <li><a href="{% url 'bom:home' %}">Cancel</a></li>
+{% endblock %}
+
+{% block content %}
+    <div class="container-app">
+        {% if profile.role == 'A' %}
+            <div class="row">
+                <form name="form" action="{% url 'bom:create-part' %}" method="post" class="col s12">
+                    {% csrf_token %}
+                    <h2>Part Number</h2>
+                    {% if organization.number_scheme == 'S' %}
+                    <p>Part numbers must be in the format CCC-{{ organization.number_ns }}-VV where CCC is the part number class, {{ organization.number_ns }} is the part number number item, and VV
+                        is the part variation. To change the part number item length or to create part classes, go to the <a
+                                href="{% url 'bom:settings' tab_anchor='indabom' %}">Settings</a> page, and create them in the IndaBOM tab.</p>
+                    {% endif %}
+                    <div class="row">
+                        {{ part_form.non_field_errors }}
+                        {{ part_form|materializecss:'m4 s12' }}
+                    </div>
+                    <h2>Part Properties</h2>
+                    {% include 'bom/part-revision-display.html' with part_revision_form=part_revision_form %}
+                    <h2>Add a Manufacturer Part</h2>
+                    <p><i>The below fields are optional.</i></p>
+                    <p>Skip this form if your part is a custom part. Leave the manufacturer field unselected if creating a new manufacturer.</p>
+                    <div class="row">
+                        {{ manufacturer_form.non_field_errors }}
+                        {{ manufacturer_part_form.manufacturer_part_number.errors }}
+                        {{ manufacturer_part_form.manufacturer_part_number|materializecss:'m4 s12' }}
+                        {{ manufacturer_part_form.manufacturer.errors }}
+                        {{ manufacturer_part_form.manufacturer|materializecss:'m4 s12' }}
+                        <div class="input-field col m4 s12">
+                            {{ manufacturer_form.name.errors }}
+                            {{ manufacturer_form.name }}
+                            <label for="{{ manufacturer_form.name.id_for_label }}">OR Create A New Manufacturer:</label>
+                        </div>
+                        <div class="input-field col m4 s12 materialize-checkbox-padding">
+                            <span>Select for parts that aren't found on Mouser.com</span>
+                        {{ manufacturer_part_form.mouser_disable.errors }}
+                        {{ manufacturer_part_form.mouser_disable|materializecss }}
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col s6">
+                            <a href="javascript:history.back()" class="waves-effect waves-light btn-flat grey-text lighten-1" style="margin-left: -16px;">Cancel</a>
+                        </div>
+                        <div class="col s6 right-align">
+                            <button class="waves-effect waves-light btn btn-primary" type="submit" name="action">Save
+                            </button>
+                        </div>
+                    </div>
+                </form>
+            </div>
+        {% else %}
+            {% include 'bom/nothing-to-see.html' with required_privilege='Admin' %}
+        {% endif %}
+    </div>
+{% endblock %}