Implement component deletion

shimatta_kenkyusho/templates/parts/components.html

@@ -5,7 +5,15 @@
     <div class="row">
         <div class="col-md">
             <h2>Components</h2>
-            <div class="list-group">
+            <form action="" method="get">
+                <div class="input-group mb-3">
+                    <input class="form-control" name="search" type="search" placeholder="Search Component..." {% if search_string %}value="{{search_string}}"{% endif %}>
+                    <button type="submit" class="btn btn-primary">
+                        <i class="bi bi-search"></i>
+                    </button>
+                    <button class="btn btn-success" type="button" data-bs-toggle="modal" data-bs-target="#comp-edit-modal"><i class="bi bi-plus-circle"></i> Add Component</button>                </div>
+            </form>
+            <div class="list-group mb-3">
                 {% for comp in components %}
                     <a href="{% url 'parts-components-detail' uuid=comp.id %}" class="text-decoration-none">
                     <li class="list-group-item list-group-item-action d-flex align-items-center">
@@ -35,4 +43,15 @@
         </div>
     </div>
 </div>
-{% endblock content %}
+
+{% include 'parts/modals/edit-component-modal.html' with form=comp_form heading='New Component' %}
+
+{% endblock content %}
+{% block custom_scripts %}
+
+<script type="text/javascript">
+{% if comp_form.errors %}
+bootstrap.Modal.getOrCreateInstance(document.getElementById('comp-edit-modal')).show()
+{% endif %}
+</script>
+{% endblock custom_scripts %}