Wrote autocompletion for foreign key field

This commit is contained in:
2022-01-01 17:18:08 +01:00
parent 563a769064
commit f21ce223bc
8 changed files with 133 additions and 69 deletions

View File

@@ -76,6 +76,7 @@
</script>
<script type="text/javascript" src="{% static 'js/kenyusho-api-v1.js' %}"></script>
<script type="text/javascript" src="{% static 'js/autocomplete.js' %}"></script>
<script type="text/javascript" src="{% static 'js/autocomplete-foreign-key-field.js' %}"></script>
{% block custom_scripts %}
{% endblock custom_scripts %}

View File

@@ -119,11 +119,6 @@
</div>
</div>
</div>
<form action="" method="post" enctype="multipart/form-data">
{% csrf_token %}
{{comp_form|crispy}}
<input type="submit" name="submit-edit-component" value="Submit">
</form>
</div>
{% if component.get_resolved_image %}
@@ -149,7 +144,7 @@
</div>
</div>
{% endif %}
{% include 'parts/modals/edit-component-modal.html' with heading="Edit "|add:component.name form=edit_form %}
{% include 'parts/modals/edit-component-modal.html' with heading="Edit "|add:component.name form=comp_form %}
{% endblock content %}
{% block custom_scripts %}

View File

@@ -17,58 +17,12 @@ Needs following context:
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
<div class="modal-body">
{{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>
{{form|crispy}}
</div>
<div class="modal-footer">
<input type="submit" name="submit-edit-comp" class="btn btn-primary" value="Save">
<input type="submit" name="submit-edit-component" class="btn btn-primary" value="Save">
</div>
</form>
</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>

View File

@@ -1,5 +1,5 @@
<div class="dropdown">
<input autocomplete="off" id="{{widget.attrs.id}}" data-ac-url="{{custom.search_url}}" data-bs-toggle="dropdown" type="text" placeholder="Search..." class="{{widget.attrs.class}}">
<input autocomplete="off" id="{{widget.attrs.id}}" data-ac-url="{{custom.search_url}}" data-ac-name-field="{{custom.name_field_name}}" {% if custom.image_field_name %}data-ac-image-field="{{custom.image_field_name}}"{% endif %} data-bs-toggle="dropdown" type="text" placeholder="Search..." class="{{widget.attrs.class}}">
<ul id="{{widget.attrs.id}}-ac-ul" class="dropdown-menu">
</ul>
<div class="d-flex align-items-center mt-3 mb-3" id="{{widget.attrs.id}}-dflex-container">
@@ -17,7 +17,7 @@
{% endif %}
<div class="ms-3">
{% if custom.current_instance %}
{{custom.current_instance}}
{{custom.name}}
{% else %}
<span class="text-secondary">None selected</span>
{% endif %}