django-bom 1.262__py3-none-any.whl

bom/templates/bom/part-info.html

@@ -0,0 +1,448 @@
+{% extends 'bom/bom-base.html' %}
+
+{% load static %}
+{% load djmoney %}
+
+{% block head-title %}{{ part.full_part_number }}{% if part_revision %} {{ part_revision.synopsis }}{% endif %}{% endblock %}
+
+{% block head %}
+    <link rel="stylesheet" type="text/css" href="{% static 'bom/css/part-info.css' %}"/>
+{% endblock %}
+
+{% block content %}
+    {% include 'bom/bom-action-btn.html' with profile=profile %}
+    <div class="container-app">
+        <div class="part-info">
+            <div class="row" style="margin-bottom: 5px;">
+                <div class="col m8 hide-on-small-and-down">
+                    <h3 class="light">{{ part.full_part_number }}</h3>
+                    {% if part_revision %}
+                        {% if profile.role == 'A' %}
+                            <p class="printer-hide">Select latest revision to edit, add a new revision, etc., or select an earlier revision for viewing only</p>
+                        {% else %}
+                            <p class="printer-hide">Select a revision for viewing</p>
+                        {% endif %}
+                    {% endif %}
+                </div>
+            </div>
+
+            <div class="row printer-hide">
+                {% if part_revision %}
+                    <div class="col l2 m3 s5">
+                        <div class="input-field">
+                            <select id="select-revision">
+                                {% for r in revisions.all %}
+                                    <option {% if part_revision.id == r.id %}selected{% endif %}
+                                            value="{% if r == part.latest %}{% url 'bom:part-info' part_id=part.id %}
+                                                    {% else %}{% url 'bom:part-info-history' part_id=part.id part_revision_id=r.id %}
+                                                    {% endif %}">Rev {{ r.revision }}{% if r.configuration == 'W' %} (working){% endif %}</option>
+                                {% endfor %}
+                            </select>
+                        </div>
+                    </div>
+                {% endif %}
+                <div class="col {% if part_revision %}m3 s1{% else %}m3 s12{% endif %}">
+                    {% if profile.role == 'A' and part_revision %}
+                        <div style="margin-top: 1.5rem;">
+                            <!-- Dropdown Trigger -->
+                            <button class='dropdown-trigger hide-on-small-and-down waves-effect waves-light btn-flat'
+                                    href='#' data-target='dropdown-revision'><i class="material-icons right">arrow_drop_down</i>Manage
+                            </button>
+                            <a class='dropdown-trigger hide-on-med-and-up' href='#' data-target='dropdown-revision'><i
+                                    class="material-icons green-text text-lighten-1">more_vert</i></a>
+                            <!-- Dropdown Structure -->
+                            <ul id='dropdown-revision' class='dropdown-content'>
+                                {% if part_revision.configuration == 'W' %}
+                                    <li>
+                                        <a class="green-text text-lighten-1"
+                                           href="{% url 'bom:part-revision-edit' part_id=part.id part_revision_id=part_revision.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:part-revision-release' part_id=part.id part_revision_id=part_revision.id %}">
+                                            <i class="material-icons green-text text-lighten-1">check</i>Release</a>
+                                    </li>
+                                {% endif %}
+                                <li>
+                                    <a class="green-text text-lighten-1" href="{% url 'bom:part-revision-new' part_id=part.id %}">
+                                        <i class="material-icons green-text text-lighten-1">add</i>New revision</a>
+                                </li>
+                                {% if part_revision.configuration == 'R' %}
+                                    <li>
+                                        <a class="green-text text-lighten-1 disabled" onclick="revertPartRevision()">
+                                            <i class="material-icons green-text text-lighten-1">undo</i>Revert to working</a>
+                                    </li>
+                                {% endif %}
+                                <li class="divider" tabindex="-1"></li>
+                                <li>
+                                    <a class="red-text text-lighten-1" onclick="deletePartRevision()">
+                                        <i class="material-icons red-text text-lighten-1">delete</i>Delete</a>
+                                </li>
+                            </ul>
+                        </div>
+                    {% elif profile.role == 'A' and not part_revision %}
+                        <a class='waves-effect waves-light btn-flat'
+                           href='{% url 'bom:part-revision-new' part_id=part.id %}'><i class="material-icons left">add</i>Create Revision</a>
+                    {% endif %}
+                </div>
+                {% if part_revision %}
+                    <div class="col m2 push-l5 push-m4 s6 right-align part-info-form">
+                        <form action="{% url 'bom:part-info' part_id=part.id %}" method="post">
+                            {% csrf_token %}
+                            <div class="row">
+                                <div class="col s9" style="padding-right: 0;">
+                                    {{ part_info_form }}
+                                </div>
+                                <div class="col s3">
+                                    <button type="submit" class="waves-effect waves-green btn-flat input-field btn-icon-round"><i class="material-icons green-text">send</i></button>
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+                {% endif %}
+            </div>
+
+            <div class="row">
+                <div class="col s12 printer-hide">
+                    <ul id="tabs" class="tabs tabs-fixed-width">
+                        <li class="tab"><a id="specs-tab" href="#specs">Specifications</a></li>
+                        <li class="tab"><a id="bom-tab" href="#bom">Bill of Materials</a></li>
+                        <li class="tab"><a id="used-tab" href="#used">Where Used</a></li>
+                        <li class="tab"><a id="sourcing-tab" href="#sourcing">Sourcing</a></li>
+                    </ul>
+                </div>
+
+                <div id="specs" class="col s12">
+                    <h4 class="printer-show">Specifications</h4>
+                    <br>
+                    <ul class="collection with-header">
+                        <li class="collection-header"><h5>Item Details</h5></li>
+                        <li class="collection-item">
+                            {% if organization.number_scheme == 'S' %}
+                                <div class="row">
+                                    <div class="col s4 l2 text-right" style="padding-left: 0px;">Item Class:</div>
+                                    <div class="col s8 l10">{{ part.number_class }}</div>
+                                </div>
+                            {% endif %}
+                            <div class="row">
+                                <div class="col s4 l2 text-right" style="padding-left: 0px;">Number:</div>
+                                <div class="col s8 l10">{{ part.full_part_number }}
+                                    {% if profile.role == 'A' %}
+                                        <a href="{% url 'bom:part-edit' part_id=part.id %}">&nbsp;[edit]</a>
+                                    {% endif %}
+                                </div>
+                            </div>
+                            <div class="row">
+                                <div class="col s4 l2 text-right" style="padding-left: 0px;">Synopsis:</div>
+                                <div class="col s8 l10">{{ part_revision.synopsis }}</div>
+                            </div>
+                            <div class="row">
+                                <div class="col s4 l2 text-right" style="padding-left: 0px;">Configuration:</div>
+                                <div class="col s8 l10">{{ part_revision.get_configuration_display|default:'n/a' }}&nbsp;<i>{% if part_revision %}(as of <span id="specs-revision-timestamp"></span>
+                                    ){% endif %}
+                                </i></div>
+                            </div>
+                            {% for property in part_revision.properties.all %}
+                                <div class="row">
+                                    <div class="col s4 l2 text-right"
+                                         style="padding-left: 0px;">{{ property.property_definition.name }}:
+                                    </div>
+                                    <div class="col s8 l10">{{ property.value_raw }}{% if property.unit_definition %}
+                                        {{ property.unit_definition.symbol }}{% endif %}</div>
+                                </div>
+                            {% endfor %}
+                            <div class="row">
+                                <div class="col s4 l2 text-right" style="padding-left: 0;">
+                                    <img title="Via Google Drive" style="width: 16px;" src="{% static 'bom/img/google_drive_logo.svg' %}">&nbsp;Files:
+                                </div>
+                                <div class="col s8 l10"><a href="{% url 'google-drive:add-folder' part_id=part.id %}" target="_blank">Open Folder</a></div>
+                            </div>
+                            <div class="row">
+                                <div id="mouser-data-sheet-wrapper" style="display: none; min-height: 22px;">
+                                    <div class="col s4 l2 text-right" style="padding-left: 0;">
+                                        <img title="Via Mouser.com" style="width: 16px;" src="{% static 'bom/img/mouser.png' %}">&nbsp;Datasheets
+                                    </div>
+                                    <div class="col s8 l10"><a id="mouser-data-sheet" target="_blank">View datasheet</a></div>
+                                </div>
+                            </div>
+                        </li>
+                        <li class="collection-header">
+                            <h5><h5 class="title">Manufacturer & Sourcing</h5></h5>
+                        </li>
+                        <li class="collection-item">
+                            <div class="row">
+                                <div class="col s4 l2 text-right" style="padding-left: 0px;">Primary Manufacturer Part:</div>
+                                <div class="col s8 l10">{% if part.primary_manufacturer_part.link %}<a href="{{ part.primary_manufacturer_part.link }}" target="_blank">{% endif %}{{ part.primary_manufacturer_part.manufacturer.name }} - {{ part.primary_manufacturer_part.manufacturer_part_number }}{% if part.primary_manufacturer_part.link %}&nbsp;<i class="material-icons" style="font-size: 14px;">open_in_new</i></a>{% endif %}
+                                    {% if profile.role == 'A' %}
+                                        <a href="{% url 'bom:part-edit' part_id=part.id %}">&nbsp;[change]</a>
+                                    {% endif %}
+                                </div>
+                            </div>
+                            <div class="row">
+                                <div class="col s4 l2 text-right" style="padding-left: 0px;">Est. Cost:</div>
+                                <div id="specs-unit-cost" class="col s8 l10"><span id="mouser-est-cost"></span><span>{{ indented_bom.unit_cost|default_if_none:'-' }}</span></div>
+                            </div>
+                            <div class="row">
+                                <div class="col s4 l2 text-right" style="padding-left: 0px;">Subparts without costs:</div>
+                                <div class="col s8 l10"><span id="mouser-missing-item-costs"></span><span>{{ indented_bom.missing_item_costs }}</span></div>
+                            </div>
+                            <div class="row">
+                                <div class="col s4 l2 text-right" style="padding-left: 0px;">Est. Total NRE:</div>
+                                <div class="col s8 l10"><span id="mouser-est-nre"></span><span>{{ indented_bom.nre|default_if_none:'-' }}</span></div>
+                            </div>
+                            <div class="row">
+                                <div class="col s4 l2 text-right" style="padding-left: 0px;">Est. Cost per {{ qty }} Unit Order (Including MOQs):</div>
+                                <div class="col s8 l10"><span id="mouser-est-cost-per-order"></span><span>{{ indented_bom.out_of_pocket_cost|default_if_none:'-' }}</span></div>
+                            </div>
+                            <div class="row" id="mouser-stock-wrapper" style="display: none;">
+                                <div class="col s4 l2 text-right" style="padding-left: 0px;">Mouser stock:</div>
+                                <div class="col s8 l10"><span id="mouser-stock"></span></div>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+
+                <div id="bom" class="col s12">
+                    <h4 class="printer-show">Bill of Materials</h4>
+                    <div id="bom-indented">
+                        <div class="text-center" style="padding-top: 8px;">
+                            <span>Indented</span> | <a onclick="showFlatBOM()" href="#">Flat</a>
+                        </div>
+                        {% include 'bom/components/bom-indented.html' with order_by=order_by bom_items=indented_bom.parts part=part part_revision=part_revision profile=profile %}
+                    </div>
+                    <div id="bom-flat" style="display: none;">
+                        <div class="text-center" style="padding-top: 8px;">
+                            <a onclick="showIndentedBOM()" href="#">Indented</a> | <span>Flat</span>
+                        </div>
+                        {% include 'bom/components/bom-flat.html' with order_by=order_by bom_items=flat_bom.parts part=part part_revision=part_revision profile=profile %}
+                    </div>
+                </div>
+
+                <div id="used" class="col s12">
+                    <h4 class="printer-show">Where Used</h4>
+                    <br>
+                    <div class="responsive-table-wrapper">
+                        <ul class="collapsible" data-collapsible="expandable" style="overflow: scroll;">
+                            <li class="active">
+                                <div class="collapsible-header"><i class="material-icons">my_location</i>Where this revision is used</div>
+                                <div class="collapsible-body">
+                                    <table class="highlight tight">
+                                        <thead>
+                                        <tr>
+                                            <th>Part Number</th>
+                                            <th>Synopsis</th>
+                                            <th>Rev</th>
+                                            <th>Manufacturer</th>
+                                            <th>MPN</th>
+                                        </tr>
+                                        </thead>
+
+                                        <tbody>
+                                        {% for used_part in where_used %}
+                                            <tr>
+                                                <td>
+                                                    <a href="{% url 'bom:part-info-history' part_id=used_part.part.id part_revision_id=used_part.id %}">{{ used_part.part.full_part_number }}</a>
+                                                </td>
+                                                <td>{{ used_part.synopsis }}</td>
+                                                <td>{{ used_part.revision }}</td>
+                                                <td>{{ used_part.part.primary_manufacturer_part.manufacturer.name }}</td>
+                                                <td>{{ used_part.part.primary_manufacturer_part.manufacturer_part_number }}</td>
+                                            </tr>
+                                        {% empty %}
+                                            <tr>
+                                                <td colspan="99" style="text-align: left; height: 20vh;"><i>This part is not currently
+                                                    used in any of your other parts. To add a part to a subassembly or assembly, go to the
+                                                    parent part's Bill of Materials, and click "Manage", then "Edit".</i></td>
+                                            </tr>
+                                        {% endfor %}
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </li>
+                            <li>
+                                <div class="collapsible-header"><i class="material-icons">location_searching</i>All part usages</div>
+                                <div class="collapsible-body">
+                                    <table class="highlight tight">
+                                        <thead>
+                                        <tr>
+                                            <th>Part Number</th>
+                                            <th>Synopsis</th>
+                                            <th>Rev</th>
+                                            <th>Manufacturer</th>
+                                            <th>MPN</th>
+                                        </tr>
+                                        </thead>
+
+                                        <tbody>
+                                        {% for used_part in where_used_part %}
+                                            <tr>
+                                                <td>
+                                                    <a href="{% url 'bom:part-info-history' part_id=used_part.part.id part_revision_id=used_part.id %}">{{ used_part.part.full_part_number }}</a>
+                                                </td>
+                                                <td>{{ used_part.synopsis }}</td>
+                                                <td>{{ used_part.revision }}</td>
+                                                <td>{{ used_part.part.primary_manufacturer_part.manufacturer.name }}</td>
+                                                <td>{{ used_part.part.primary_manufacturer_part.manufacturer_part_number }}</td>
+                                            </tr>
+                                        {% empty %}
+                                            <tr>
+                                                <td colspan="99" style="text-align: center; height: 20vh;"><i>This part is not currently
+                                                    used in any of your other parts.
+                                                    {% if profile.role == 'A' %}
+                                                        To add a part to a subassembly or assembly, go to the
+                                                        parent part's Bill of Materials, and click "Manage", then "Edit".
+                                                    {% endif %}
+                                                </i></td>
+                                            </tr>
+                                        {% endfor %}
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div id="sourcing" class="col s12">
+                    <h4 class="printer-show">Sourcing</h4>
+                    {% include 'bom/components/manufacturer-part-list.html' with manufacturer_parts=part.manufacturer_parts part_revision=part_revision profile=profile %}
+                    {% if profile.role == 'A' %}
+                        <div class="row" style="padding-top: 16px;">
+                            <div class="col s12 center-align">
+                                <a class="waves-effect waves-green btn-flat"
+                                   href="{% url 'bom:part-add-manufacturer-part' part_id=part.id %}" style="margin: 10px;">Add Manufacturer Part</a>
+                            </div>
+                        </div>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+    </div>
+{% endblock %}
+{% block bom-script %}
+    <!-- Materialize initializer -->
+    <script>
+        $(document).ready(function () {
+            $('.collapsible').collapsible({
+                accordion: false
+            });
+        });
+        var elem = document.querySelector('.collapsible.expandable');
+        var instance = M.Collapsible.init(elem, {
+            accordion: false
+        });
+    </script>
+
+    <!-- Handle if there's an anchor, select tab -->
+    <script type='text/javascript'>
+        var tabsElem = document.querySelector('.tabs');
+
+        {% if tab_anchor %}
+            $('#{{ tab_anchor }}-tab').addClass('active');
+        {% endif %}
+
+        var tabs = M.Tabs.init(tabsElem);
+
+        // For dropdown menu
+        $(document).ready(function () {
+            $('.dropdown-trigger').dropdown({
+                    inDuration: 300,
+                    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
+                }
+            );
+
+            {% if not tab_anchor %}
+                if (window.localStorage['part-info-last-anchor']) {
+                    {#tabs.select(window.localStorage['part-info-last-anchor']);#}
+                }
+            {% endif %}
+        });
+    </script>
+
+    <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>
+
+    <!-- For revision selector logic -->
+    <script>
+        var selectRevisionSelectedIndex = 1;
+        $(document).ready(function () {
+            selectRevisionSelectedIndex = $("#select-revision")[0].selectedIndex;
+        });
+
+        $("#select-revision").on('change', function () {
+            var url = $(this)[0].value;
+            var selectedIndex = $(this)[0].selectedIndex;
+            if (selectedIndex === 0) {
+                var value = "{% if revision == part.latest %}{% url 'bom:part-info' part_id=part.id %}{% else %}{% url 'bom:part-info-history' part_id=part.id part_revision_id=part_revision.id %}{% endif %}";
+                $("#select-revision")[0].selectedIndex = selectRevisionSelectedIndex;
+                $("#select-revision").formSelect();
+            }
+            window.location.href = url;
+        });
+    </script>
+
+    <!-- Revision timestamp to local time -->
+    <script>
+        $(document).ready(function () {
+            let revision_configuration_date = new Date("{{ part_revision.timestamp.isoformat }}")
+            $("#specs-revision-timestamp").text(revision_configuration_date.toLocaleString());
+        })
+    </script>
+
+    <!-- Confirmation popups?  -->
+    <script>
+        function deletePartRevision() {
+            {% if part_revision is not None %}
+                let url = "{% url 'bom:part-revision-delete' part_id=part.id part_revision_id=part_revision.id %}";
+                if (confirm("Are you sure you want to delete this revision?\n\nIt will be deleted permanently.")) {
+                    window.location.href = url;
+                }
+            {% else %}
+                confirm("No part revisions to delete!");
+            {% endif %}
+        }
+
+        function revertPartRevision() {
+            {% if part_revision is not None %}
+                let url = "{% url 'bom:part-revision-revert' part_id=part.id part_revision_id=part_revision.id %}";
+                if (confirm("Are you sure you want to revert this revision?\n\n")) {
+                    window.location.href = url;
+                }
+            {% else %}
+                confirm("No part revisions to revert!");
+            {% endif %}
+        }
+    </script>
+
+    <script>
+        function showFlatBOM() {
+            $('#bom-indented').hide();
+            $('#bom-flat').show();
+        }
+
+        function showIndentedBOM() {
+            $('#bom-flat').hide();
+            $('#bom-indented').show();
+        }
+    </script>
+{% endblock bom-script %}

bom/templates/bom/part-revision-display.html

@@ -0,0 +1,50 @@
+{% load static %}
+{% load materializecss %}
+
+{% comment %}
+
+This file is intended to be used as a Django include file for the purpose of displaying
+all of the properties of a part revision, as follows:
+
+    {% include 'bom/part-revision-display.html' with part_revision_form=XXX %}
+ 
+where XXX should be the name of the includee's object that represent its PartRevisionForm.
+
+{% endcomment %}
+<div class="row">
+    <div class="fieldWrapper">
+        {{ part_revision_form.revision|materializecss:'m2 s12' }}
+    </div>
+    <div class="fieldWrapper">
+        {{ part_revision_form.description|materializecss:'m8 s12' }}
+    </div>
+</div>
+
+<div class="row">
+    <div class="col s12">
+        {% if part_revision_form.property_definitions %}
+            <h4>Properties</h4>
+        {% elif not part_revision_form.instance.pk %}
+            <p><i>You can add part class specific properties (e.g. voltage, width, sheen, etc) after creating the
+                part.</i></p>
+        {% else %}
+            <p><i>This part has no properties assigned. The organization admin can assign properties to this part class
+                in settings.</i></p>
+        {% endif %}
+    </div>
+</div>
+
+<div class="row">
+    {% for group in part_revision_form.property_fields %}
+        <div class="row">
+            <div class="fieldWrapper">
+                {{ group.property|materializecss:'m3 s6' }}
+            </div>
+            {% if group.unit %}
+                <div class="fieldWrapper">
+                    {{ group.unit|materializecss:'m3 s6' }}
+                </div>
+            {% endif %}
+        </div>
+    {% endfor %}
+</div>

bom/templates/bom/part-revision-edit.html

@@ -0,0 +1,39 @@
+{% extends 'bom/bom-base.html' %}
+
+{% load static %}
+{% load materializecss %}
+
+{% block head-title %}{{ title }}{% endblock %}
+
+{% block bom-menu %}
+    <li><a href="{% url 'bom:part-info' part_id=part.id %}">Cancel</a></li>
+{% endblock %}
+
+{% if profile.role == 'A' %}
+    {% block content %}
+        <div class="row container-app">
+            <form action="{% url 'bom:part-revision-edit' part_id=part.id part_revision_id=part_revision.id %}" method="post" class="col s12">
+                {% csrf_token %}
+                {{ part_form.non_field_errors }}
+                <div class="row">
+                    <div class="col s12">
+                        <i>Edit this revision's properties below, or click <a href="{% url 'bom:part-manage-bom' part_id=part.id part_revision_id=part_revision.id %}">here</a>
+                            if you want to manage this revision's bill of materials.</i>
+                    </div>
+                </div>
+
+                {% include 'bom/part-revision-display.html' with part_revision_form=form %}
+
+                <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>
+    {% endblock %}
+{% endif %}

bom/templates/bom/part-revision-manage-bom.html

@@ -0,0 +1,115 @@
+{% extends 'bom/bom-base.html' %}
+
+{% load static %}
+{% load materializecss %}
+
+{% block head-title %}{{ title }}{% endblock %}
+
+{% block main %}
+    {{ add_subpart_form.media }}
+{% endblock %}
+
+{% block bom-menu %}
+{% endblock %}
+
+{% block content %}
+    <div class="part-info container-app">
+        <a href="{% url 'bom:part-info' part_id=part.id %}">Return to {{ part.full_part_number }}</a>
+        <!-- <h5>{{ part.description }}</h5> -->
+        <div id="bom" class="col s12">
+            <br><h5>Modify Subparts</h5>
+
+            {% include 'bom/components/bom-indented.html' with order_by='indented' manage=1 bom_items=indented_bom.parts part=part part_revision=part_revision profile=profile %}
+
+            <br><h5>Add Subpart</h5>
+            <div class="row">
+                <form action="{% url 'bom:part-add-subpart' part_id=part.id part_revision_id=part_revision.id %}"
+                      method="post" class="col s12">
+                    {% csrf_token %}
+                    {{ add_subpart_form.subpart_part_number|materializecss:'m4 s12' }}
+                    {{ add_subpart_form.count|materializecss:'m1 s12' }}
+                    {{ add_subpart_form.do_not_load|materializecss:'m2 s12 input-field materialize-checkbox-padding' }}
+                    {{ add_subpart_form.reference|materializecss:'m4 s12' }}
+                    <div class="fieldWrapper">
+                        <button class="waves-effect waves-light btn btn-primary" type="submit" name="action">add
+                        </button>
+                    </div>
+                </form>
+            </div>
+            <br><h5>Batch Add Subparts</h5>
+            <p>To add batch subparts, upload a csv that contains at least two columns with the headers:
+                <b>part_number</b> <i>or</i> <b>manufacturer_part_number</b> and <b>quantity</b>; the 'part_number' or
+                'manufacturer_part_number' column must contain part numbers that have already been created in this
+                system.</p>
+            <p>Additional fields include 'reference' or 'designator' to add a reference field to the subpart;
+               'do_not_load' if you don't want the part loaded into the assembly that contains it; 'dnp' if
+                you don't want to upload the part to IndaBOM.</p>
+            <form action="{% url 'bom:part-upload-bom' part_id=part.id %}" method="post" enctype="multipart/form-data">
+                {% csrf_token %}
+                <div class="row">
+                    <div class="col s9 file-field input-field">
+                        <div class="green lighten-1 btn">
+                            <span>File</span>
+                            {{ upload_subparts_csv_form.file }}
+                        </div>
+                        <div class="file-path-wrapper">
+                            <input class="file-path validate" type="text" placeholder="Upload a file.">
+                            {{ upload_subparts_csv_form.file.errors }}
+                        </div>
+                    </div>
+                    <div class="col s1 input-field">
+                        <input class="green lighten-1 btn" type="submit" value="Upload"/>
+                    </div>
+                </div>
+            </form>
+            <div class="row">
+                <div class="col s6">
+                    <a href="{% url 'bom:part-info' part_id=part.id %}" class="waves-effect waves-light btn-flat grey-text lighten-1" style="margin-left: -16px;">Cancel</a>
+                </div>
+            </div>
+            <br>
+        </div>
+    </div>
+{% endblock %}
+
+{% block bom-script %}
+    <!-- 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 }});
+            }
+        });
+    </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>
+
+    <!-- Handle if there's an anchor, select tab -->
+    <script type='text/javascript'>
+        // For dropdown menu
+        $(document).ready(function () {
+            $('.dropdown-trigger').dropdown({
+                    inDuration: 300,
+                    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
+                }
+            );
+
+        });
+    </script>
+{% endblock bom-script %}