Refactor synonym management: extract synonyms list and add forms for adding synonyms with HTMX support

This commit is contained in:
Ross
2025-11-20 21:59:50 +00:00
parent 21de543313
commit 9d57d03cbb
3 changed files with 71 additions and 27 deletions
+3 -27
View File
@@ -31,33 +31,9 @@
<dt class="col-sm-4">Synonyms</dt>
<dd class="col-sm-8">
{% for syn in condition.synonym.all %}
<a class="badge bg-secondary text-decoration-none text-white me-1" href="{{ syn.get_absolute_url }}">{{ syn }}</a>
{% empty %}
&mdash;
{% endfor %}
{% if request.user.is_authenticated and can_merge %}
<div class="mt-2">
<a class="btn btn-sm btn-outline-primary" data-bs-toggle="collapse" href="#addSynonymCollapse" role="button" aria-expanded="false" aria-controls="addSynonymCollapse">Add synonym</a>
</div>
<div class="collapse mt-2" id="addSynonymCollapse">
<div class="card card-body">
<form method="POST">
{% csrf_token %}
<input type="hidden" name="action" value="add_synonym" />
<div class="mb-2">
<label class="form-label small">Select existing condition</label>
{{ synonym_form.condition }}
</div>
<div class="mb-2">
<label class="form-label small">Or create new synonym name</label>
<input class="form-control" type="text" name="synonym_name" placeholder="e.g. Granulomatosis with Polyangiitis" />
</div>
<button class="btn btn-primary btn-sm" type="submit">Add</button>
</form>
</div>
</div>
{% endif %}
<div id="synonyms-container">
{% include 'atlas/partials/_synonyms_list.html' %}
</div>
</dd>
<dt class="col-sm-4">Parent</dt>
@@ -0,0 +1,54 @@
{% comment %}Partial that renders the synonyms list + add form. Used by condition_detail and HTMX responses.{% endcomment %}
{% load static %}
{% if condition.synonym.all %}
{% for syn in condition.synonym.all %}
<a class="badge bg-secondary text-decoration-none text-white me-1" href="{{ syn.get_absolute_url }}">{{ syn }}</a>
{% endfor %}
{% else %}
&mdash;
{% endif %}
{% if request.user.is_authenticated and can_merge %}
<div class="mt-2 d-flex gap-2">
<!-- Button to add an existing condition as a synonym -->
<a class="btn btn-sm btn-outline-primary" data-bs-toggle="collapse" href="#addSynonymCollapse" role="button" aria-expanded="false" aria-controls="addSynonymCollapse">Add synonym</a>
<!-- Button to create a new condition and add it as a synonym -->
<a class="btn btn-sm btn-outline-success" data-bs-toggle="collapse" href="#createSynonymCollapse" role="button" aria-expanded="false" aria-controls="createSynonymCollapse">Create synonym</a>
</div>
<!-- Collapse: add existing condition -->
<div class="collapse mt-2" id="addSynonymCollapse">
<div class="card card-body">
<form method="POST"
hx-post="{% url 'atlas:condition_detail' condition.pk %}"
hx-target="#synonyms-container" hx-swap="innerHTML">
{% csrf_token %}
<input type="hidden" name="action" value="add_synonym" />
<div class="mb-2">
<label class="form-label small">Select existing condition</label>
{{ synonym_form.condition }}
</div>
<button class="btn btn-primary btn-sm" type="submit">Add</button>
</form>
</div>
</div>
<!-- Collapse: create new condition -->
<div class="collapse mt-2" id="createSynonymCollapse">
<div class="card card-body">
<form method="POST"
hx-post="{% url 'atlas:condition_detail' condition.pk %}"
hx-target="#synonyms-container" hx-swap="innerHTML">
{% csrf_token %}
<input type="hidden" name="action" value="add_synonym" />
<div class="mb-2">
<label class="form-label small">Create new synonym name</label>
<input class="form-control" type="text" name="synonym_name" placeholder="e.g. Granulomatosis with Polyangitis" required />
</div>
<button class="btn btn-success btn-sm" type="submit">Create</button>
</form>
</div>
</div>
{% endif %}