inventree/InvenTree
2
0
Fork 0
mirror of https://github.com/inventree/InvenTree.git synced 2025-05-01 04:56:45 +00:00
Code

Added toggle for part details

Browse Source 
Added persistence for page refresh or new part page
This commit is contained in:
eeintech 2021-07-30 14:55:12 -04:00
parent 20b21a2b71
commit 634e5e0da6
1 changed files with 123 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

182
InvenTree/part/templates/part/part_base.html
View File

@ -210,67 +210,91 @@
</div> </div>
</div> </div>
<!-- Table --> <p>
<table class="table table-striped"> <!-- Details show/hide button -->
<col width='25'> <button id="toggle-part-details" class="btn btn-primary" data-toggle="collapse" data-target="#collapsible-part-details" value="show">
{% if part.description %} </button>
<td><span class='fas fa-info-circle'></span></td> </p>
<td>{% trans "Description" %}</td>
<td>{{ part.description }}{% include "clip.html"%}</td> <div class="collapse" id="collapsible-part-details">
{% endif %} <div class="card card-body">
{% if part.revision %} <!-- Details Table -->
<tr> <table class="table table-striped">
<td><span class='fas fa-code-branch'></span></td> <col width='25'>
<td>{% trans "Revision" %}</td> {% if part.IPN %}
<td>{{ part.revision }}{% include "clip.html"%}</td> <tr>
</tr> <td><span class='fas fa-tag'></span></td>
{% endif %} <td>{% trans "IPN" %}</td>
{% if part.keywords %} <td>{{ part.IPN }}{% include "clip.html"%}</td>
<tr> </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 %} {% endif %}
</td> <tr>
</tr> <td><span class='fas fa-shapes'></span></td>
{% if part.trackable and part.getLatestSerialNumber %} <td>{% trans "Name" %}</td>
<tr> <td>{{ part.name }}{% include "clip.html"%}</td>
<td><span class='fas fa-hashtag'></span></td> </tr>
<td>{% trans "Latest Serial Number" %}</td> <tr>
<td>{{ part.getLatestSerialNumber }}{% include "clip.html"%}</td> <td><span class='fas fa-info-circle'></span></td>
</tr> <td>{% trans "Description" %}</td>
{% endif %} <td>{{ part.description }}{% include "clip.html"%}</td>
{% if part.default_location %} </tr>
<tr> {% if part.revision %}
<td><span class='fas fa-search-location'></span></td> <tr>
<td>{% trans "Default Location" %}</td> <td><span class='fas fa-code-branch'></span></td>
<td>{{ part.default_location }}</td> <td>{% trans "Revision" %}</td>
</tr> <td>{{ part.revision }}{% include "clip.html"%}</td>
{% endif %} </tr>
{% if part.default_supplier %} {% endif %}
<tr> {% if part.keywords %}
<td><span class='fas fa-building'></span></td> <tr>
<td>{% trans "Default Supplier" %}</td> <td><span class='fas fa-key'></span></td>
<td>{{ part.default_supplier }}</td> <td>{% trans "Keywords" %}</td>
</tr> <td>{{ part.keywords }}{% include "clip.html"%}</td>
{% endif %} </tr>
</table> {% 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> </div>
{% block page_content %} {% block page_content %}
@ -478,4 +502,42 @@
}); });
{% endif %} {% 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 %} {% endblock %}