Add a lot of stuff.. Can't remember

shimatta_kenkyusho/templates/parts/components-detail.html

@@ -4,16 +4,55 @@
 
 {% block content %}
 <div class="container">
-    <div class="col-md-3">
-        <div class="row justify-content-center">
-            {% if component.get_resolved_image %}
-                <img src="{{component.get_resolved_image}}" alt="{{component.name}}" class="component-img-big btn" data-bs-toggle="modal" data-bs-target="#comp-img-modal">
-            {% else %}
-                <img src="{% static 'css/icons/card-image.svg' %}" alt="{{component.name}}" class="component-img-def-big">
+    <div class="row">
+        <div class="col-md-3">
+            <div class="row justify-content-center">
+                {% if component.get_resolved_image %}
+                    <img src="{{component.get_resolved_image}}" alt="{{component.name}}" class="component-img-big btn" data-bs-toggle="modal" data-bs-target="#comp-img-modal">
+                {% else %}
+                    <img src="{% static 'css/icons/card-image.svg' %}" alt="{{component.name}}" class="component-img-def-big">
+                {% endif %}
+            </div>
+            <div class="row">
+                {% qr_from_text component.get_qr_code size="m" image_format="svg" %}
+            </div>
+            <div class="row">
+            {% if component.datasheet_link %}
+            <a class="btn btn-secondary mb-2" href="{{component.datasheet_link}}"><i class="bi bi-file-pdf-fill"></i> Datasheet</a>
             {% endif %}
+            <button class="btn btn-primary mb-2" data-bs-toggle="modal" data-bs-target="#comp-edit-modal"><i class="bi bi-pencil-square"></i> Edit Component</button>
+            </div>
         </div>
-        <div class="row">
-            {% qr_from_text component.get_qr_code size="m" image_format="svg" %}
+        <div class="col">
+            <table class="table">
+                <thead>
+                    <tr>
+                        <th scope="col">Name</th>
+                        <th scope="col">Package</th>
+                        <th scope="col">Manufacturer</th>
+                        <th scope="col">Type</th>
+                        <th scope="col">Total #</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <th scope="row">{{component.name}}</th>
+                        <th>{% if component.package %}<a href="{% url 'parts-packages-detail' uuid=component.package.id %}" class="link-primary text-decoration-none">{{component.package.name}}</a>{% endif %}</th>
+                        <th>{% if component.manufacturer %}{{component.manufacturer.name}}{% endif %}</th>
+                        <th>{% if component.component_type %}{{component.component_type.class_name}}{% endif %}
+                        <th>{{component.get_total_amount}}</th>
+                    </tr>
+                </tbody>
+            </table>
+            <h2>Description</h2>
+            {% if component.description %}
+                {{component.description}}
+            {% else %}
+                <div class="alert alert-secondary" role="alert">
+                    No description available
+                </div>
+            {% endif %}
+            
         </div>
     </div>
 </div>
@@ -41,5 +80,15 @@
     </div>
 </div>
 {% endif %}
+{% include 'parts/modals/edit-component-modal.html' with heading="Edit "|add:component.name edit_form=edit_form %}
+{% endblock content %}
+
+{% block custom_scripts %}
+
+<script type="text/javascript">
+{% if edit_form.errors %}
+bootstrap.Modal.getOrCreateInstance(document.getElementById('comp-edit-modal')).show()
+{% endif %}
+</script>
+{% endblock custom_scripts %}
 
-{% endblock content %}

shimatta_kenkyusho/templates/parts/modals/edit-component-modal.html

@@ -0,0 +1,27 @@
+{% comment "" %}
+Needs following context:
+- heading
+- edit_form EditComponentForm
+{% endcomment %}
+
+{% load crispy_forms_tags %}
+
+<div class="modal fade" id="comp-edit-modal" tabindex="-1">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2>{{heading}}</h2>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <form method="post" enctype="multipart/form-data">
+                {% csrf_token %}
+                <div class="modal-body">
+                    {{edit_form|crispy}}
+                </div>
+                <div class="modal-footer">
+                    <input type="submit" name="submit-edit-comp" class="btn btn-primary" value="Save">
+                </div>
+            </form>
+        </div>
+    </div>
+</div>

shimatta_kenkyusho/templates/parts/stocks-detail.html

@@ -47,15 +47,15 @@
         <div class="col">
             <h1>Stocked Components</h1>
             <form method="get">
-                <div class="input-group">
+                <div class="input-group mb-3">
                     <input class="form-control" name="search" type="search" placeholder="Search..." {% if stock_search %}value="{{stock_search}}"{% endif %}>
                     <button type="submit" class="btn btn-primary">
                         <i class="bi bi-search"></i>
                     </button>
                 </div>
             </form>
-            <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#add-stock-modal">
-                <i class="bi bi-plus-circle"></i>
+            <button class="btn btn-success mb-3" data-bs-toggle="modal" data-bs-target="#add-stock-modal">
+                <i class="bi bi-plus-circle"></i> Add Stock
             </button>
             <div class="list-group">
                 {% for stock in stocks %}