Added toggle for part details

Added persistence for page refresh or new part page

InvenTree/part/templates/part/part_base.html

@@ -210,14 +210,34 @@
         </div>
     </div>
 
-    <!-- Table -->
+    <p>
+        <!-- Details show/hide button -->
+        <button id="toggle-part-details" class="btn btn-primary" data-toggle="collapse" data-target="#collapsible-part-details" value="show">
+        </button>
+    </p>
+        
+    <div class="collapse" id="collapsible-part-details">
+        <div class="card card-body">
+            <!-- Details Table -->
             <table class="table table-striped">
                 <col width='25'>
-        {% if part.description %}
+                {% 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 %}
+                <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>
-        {% endif %}
+                </tr>
                 {% if part.revision %}
                 <tr>
                     <td><span class='fas fa-code-branch'></span></td>
@@ -272,6 +292,10 @@
                 {% endif %}
             </table>
         </div>
+    </div>
+
+    
+</div>
 
 {% block page_content %}
 {% endblock %}
@@ -478,4 +502,42 @@
     });
     {% endif %}
 
+    $("#toggle-part-details").click(function() {
+        if (this.value == 'show') {
+            this.innerHTML = '<span class="fas fa-chevron-up"></span> {% trans "Hide Part Details" %}';
+            this.value = 'hide';
+            // Store state of part details section
+            localStorage.setItem("part-details-show", true);
+        } else {
+            this.innerHTML = '<span class="fas fa-chevron-down"></span> {% trans "Show Part Details" %}';
+            this.value = 'show';
+            // Store state of part details section
+            localStorage.setItem("part-details-show", false);
+        }
+    });
+
+    // Load part details section
+    window.onload = function() {
+        details_show = localStorage.getItem("part-details-show")
+
+        if (details_show === 'true') {
+            console.log(details_show)
+            // Get collapsible details section
+            details = document.getElementById('collapsible-part-details');
+            // Add "show" class
+            details.classList.add("in");
+            // Get toggle
+            toggle = document.getElementById('toggle-part-details');
+            // Change state of toggle
+            toggle.innerHTML = '<span class="fas fa-chevron-up"></span> {% trans "Hide Part Details" %}';
+            toggle.value = 'hide';
+        } else {
+            // Get toggle
+            toggle = document.getElementById('toggle-part-details');
+            // Change state of toggle
+            toggle.innerHTML = '<span class="fas fa-chevron-down"></span> {% trans "Show Part Details" %}';
+            toggle.value = 'show';
+        }
+    }
+
 {% endblock %}