From 634e5e0da6b1ca2eae0496f5298e2255a954e6d5 Mon Sep 17 00:00:00 2001
From: eeintech <eeintech@eeinte.ch>
Date: Fri, 30 Jul 2021 14:55:12 -0400
Subject: [PATCH] Added toggle for part details Added persistence for page
 refresh or new part page

---
 InvenTree/part/templates/part/part_base.html | 184 +++++++++++++------
 1 file changed, 123 insertions(+), 61 deletions(-)

diff --git a/InvenTree/part/templates/part/part_base.html b/InvenTree/part/templates/part/part_base.html
index 53444e4f8e..5191399f0a 100644
--- a/InvenTree/part/templates/part/part_base.html
+++ b/InvenTree/part/templates/part/part_base.html
@@ -209,68 +209,92 @@
             </div>
         </div>
     </div>
-    
-    <!-- Table -->
-    <table class="table table-striped">
-        <col width='25'>
-        {% if part.description %}
-            <td><span class='fas fa-info-circle'></span></td>
-            <td>{% trans "Description" %}</td>
-            <td>{{ part.description }}{% include "clip.html"%}</td>
-        {% 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.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'>{{ part.creation_user }}</span>
+
+    <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.IPN %}
+                <tr>
+                    <td><span class='fas fa-tag'></span></td>
+                    <td>{% trans "IPN" %}</td>
+                    <td>{{ part.IPN }}{% include "clip.html"%}</td>
+                </tr>
                 {% 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>{{ part.default_location }}</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>
+                <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.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.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'>{{ 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>{{ part.default_location }}</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>
 
 {% block page_content %}
@@ -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 %}
\ No newline at end of file