Implement edit componant form and adapt UI
This commit is contained in:
@@ -8,6 +8,9 @@
|
||||
<link href="{% static 'css/icons/bootstrap-icons.css' %}" rel="stylesheet">
|
||||
<link href="{% static 'css/shimatta-kenkyusho-base.css' %}" rel="stylesheet">
|
||||
<title>{{ base.title }}</title>
|
||||
<script type="text/javascript">
|
||||
const fallback_img_path = "{% static 'css/icons/card-image.svg' %}";
|
||||
</script>
|
||||
{% block customhead %}
|
||||
{% endblock customhead %}
|
||||
</head>
|
||||
@@ -66,6 +69,9 @@
|
||||
'package-list': '{% url 'package-list' %}',
|
||||
'stock-list': '{% url 'stock-list' %}',
|
||||
'distributor-list': '{% url 'distributor-list' %}',
|
||||
'manufacturer-list': '{% url 'manufacturer-list' %}',
|
||||
'component-type-list': '{% url 'componenttype-list' %}',
|
||||
'component-parameter-type-list': '{% url 'componentparametertype-list' %}',
|
||||
};
|
||||
</script>
|
||||
<script type="text/javascript" src="{% static 'js/kenyusho-api-v1.js' %}"></script>
|
||||
|
@@ -36,17 +36,37 @@
|
||||
</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>
|
||||
<td class="align-middle" scope="row">
|
||||
{{component.name}}
|
||||
</td>
|
||||
<td class="align-middle" >
|
||||
{% if component.package %}
|
||||
<a href="{% url 'parts-packages-detail' uuid=component.package.id %}" class="link-primary text-decoration-none">{{component.package.name}}</a>
|
||||
{% if component.package.image %}
|
||||
<img src="{{component.package.image.url}}" class="component-img-small">
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="align-middle" >
|
||||
{% if component.manufacturer %}
|
||||
{{component.manufacturer.name}}
|
||||
{% if component.manufacturer.image %}
|
||||
<img src="{{component.manufacturer.image.url}}" class="component-img-small">
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
{% if component.component_type %}{{component.component_type.class_name}}{% endif %}
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
{{component.get_total_amount}}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2>Description</h2>
|
||||
{% if component.description %}
|
||||
{{component.description}}
|
||||
{{component.description|linebreaks}}
|
||||
{% else %}
|
||||
<div class="alert alert-secondary" role="alert">
|
||||
No description available
|
||||
@@ -80,7 +100,7 @@
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% include 'parts/modals/edit-component-modal.html' with heading="Edit "|add:component.name edit_form=edit_form %}
|
||||
{% include 'parts/modals/edit-component-modal.html' with heading="Edit "|add:component.name form=edit_form %}
|
||||
{% endblock content %}
|
||||
|
||||
{% block custom_scripts %}
|
||||
|
@@ -1,9 +1,10 @@
|
||||
{% comment "" %}
|
||||
Needs following context:
|
||||
- heading
|
||||
- edit_form EditComponentForm
|
||||
- form EditComponentForm
|
||||
{% endcomment %}
|
||||
|
||||
{% load static %}
|
||||
{% load crispy_forms_tags %}
|
||||
|
||||
<div class="modal fade" id="comp-edit-modal" tabindex="-1">
|
||||
@@ -16,7 +17,44 @@ Needs following context:
|
||||
<form method="post" enctype="multipart/form-data">
|
||||
{% csrf_token %}
|
||||
<div class="modal-body">
|
||||
{{edit_form|crispy}}
|
||||
{{form.name|as_crispy_field}}
|
||||
{{form.datasheet_link|as_crispy_field}}
|
||||
{{form.description|as_crispy_field}}
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="{{form.manufacturer.id_for_label}}">Manufacturer</label>
|
||||
<div class="dropdown">
|
||||
<input autocomplete="off" data-bs-toggle="dropdown" class="form-control{% if form.manufacturer.errors %} is-invalid{% endif %}" type="text" id="{{form.manufacturer.id_for_label}}" name="{{form.manufacturer.name}}" value="{{form.manufacturer.value}}">
|
||||
<ul id="{{form.manufacturer.id_for_label}}-ac-ul" class="dropdown-menu">
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="{{form.package.id_for_label}}">Package</label>
|
||||
<div class="dropdown">
|
||||
<input autocomplete="off" data-bs-toggle="dropdown" class="form-control{% if form.package.errors %} is-invalid{% endif %}" type="text" id="{{form.package.id_for_label}}" name="{{form.package.name}}" value="{{form.package.value}}">
|
||||
<ul id="{{form.package.id_for_label}}-ac-ul" class="dropdown-menu">
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="{{form.component_type.id_for_label}}">Component Type</label>
|
||||
<div class="dropdown">
|
||||
<input autocomplete="off" data-bs-toggle="dropdown" class="form-control{% if form.component_type.errors %} is-invalid{% endif %}" type="text" id="{{form.component_type.id_for_label}}" name="{{form.component_type.name}}" value="{{form.component_type.value}}">
|
||||
<ul id="{{form.component_type.id_for_label}}-ac-ul" class="dropdown-menu">
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="{{form.pref_distri.id_for_label}}">Preferred Distributor</label>
|
||||
<div class="dropdown">
|
||||
<input autocomplete="off" data-bs-toggle="dropdown" class="form-control{% if form.pref_distri.errors %} is-invalid{% endif %}" type="text" id="{{form.pref_distri.id_for_label}}" name="{{form.pref_distri.name}}" value="{{form.pref_distri.value}}">
|
||||
<ul id="{{form.pref_distri.id_for_label}}-ac-ul" class="dropdown-menu">
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
{{form.image|as_crispy_field}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<input type="submit" name="submit-edit-comp" class="btn btn-primary" value="Save">
|
||||
@@ -24,4 +62,13 @@ Needs following context:
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
const edit_comp_modal_ids = {
|
||||
'package': '{{form.package.id_for_label}}',
|
||||
'manufacturer': '{{form.manufacturer.id_for_label}}',
|
||||
'component_type': '{{form.component_type.id_for_label}}',
|
||||
'pref_distri': '{{form.pref_distri.id_for_label}}',
|
||||
}
|
||||
</script>
|
||||
<script type="text/javascript" src="{% static 'js/edit-component-modal.js' %}"></script>
|
@@ -168,9 +168,5 @@ function(search, autocomplete_obj) {
|
||||
}, function(){});
|
||||
});
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
const fallback_img_path = "{% static 'css/icons/card-image.svg' %}";
|
||||
</script>
|
||||
|
||||
{% endblock custom_scripts %}
|
||||
|
||||
|
Reference in New Issue
Block a user