feat: add links section to contact create/edit form

Links can now be attached to contacts directly from the create and edit
forms with dynamic add/remove rows and role suggestions.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-06 14:32:13 +00:00
parent 6b63bf3c62
commit e334e0e9db
2 changed files with 102 additions and 5 deletions

View File

@@ -13,7 +13,58 @@
<div class="form-group"><label class="form-label">Phone</label><input type="tel" name="phone" class="form-input" value="{{ item.phone if item and item.phone else '' }}"></div>
<div class="form-group full-width"><label class="form-label">Notes</label><textarea name="notes" class="form-textarea" rows="4">{{ item.notes if item and item.notes else '' }}</textarea></div>
<div class="form-group full-width"><label class="form-label">Tags</label><input type="text" name="tags" class="form-input" value="{{ item.tags|join(', ') if item and item.tags else '' }}"></div>
<div class="form-actions"><button type="submit" class="btn btn-primary">{{ 'Save' if item else 'Create' }}</button><a href="/contacts" class="btn btn-secondary">Cancel</a></div>
<!-- Links -->
<div class="form-group full-width">
<label class="form-label">Links</label>
<div id="contact-links-list">
{% if linked_links is defined and linked_links %}
{% for ll in linked_links %}
<div class="flex gap-2 items-center mb-2 contact-link-row">
<select name="link_ids" class="form-select" style="flex:2;">
<option value="">Select link...</option>
{% for l in all_links %}
<option value="{{ l.id }}" {{ 'selected' if l.id|string == ll.id|string }}>{{ l.label }} — {{ l.url[:40] }}{% if l.url|length > 40 %}...{% endif %}</option>
{% endfor %}
</select>
<input type="text" name="link_roles" class="form-input" list="link-roles" placeholder="Role..." value="{{ ll.role or '' }}" style="flex:1;">
<button type="button" class="btn btn-ghost btn-xs" style="color:var(--red);" onclick="this.closest('.contact-link-row').remove()">&times;</button>
</div>
{% endfor %}
{% endif %}
</div>
<button type="button" class="btn btn-ghost btn-sm" id="add-link-btn">+ Add Link</button>
<datalist id="link-roles">
<option value="website">
<option value="portfolio">
<option value="social">
<option value="documentation">
<option value="reference">
<option value="profile">
<option value="repository">
</datalist>
</div>
<div class="form-actions"><button type="submit" class="btn btn-primary">{{ 'Save' if item else 'Create' }}</button><a href="{{ '/contacts/' ~ item.id if item else '/contacts' }}" class="btn btn-secondary">Cancel</a></div>
</div>
</form></div>
<script>
(function() {
var linkOpts = '';
{% if all_links is defined %}
linkOpts = '<option value="">Select link...</option>' +
{% for l in all_links %}'<option value="{{ l.id }}">{{ l.label }} — {{ l.url[:40] }}{% if l.url|length > 40 %}...{% endif %}</option>' +{% endfor %}
'';
{% endif %}
document.getElementById('add-link-btn').addEventListener('click', function() {
var row = document.createElement('div');
row.className = 'flex gap-2 items-center mb-2 contact-link-row';
row.innerHTML = '<select name="link_ids" class="form-select" style="flex:2;">' + linkOpts + '</select>' +
'<input type="text" name="link_roles" class="form-input" list="link-roles" placeholder="Role..." style="flex:1;">' +
'<button type="button" class="btn btn-ghost btn-xs" style="color:var(--red);" onclick="this.closest(\'.contact-link-row\').remove()">&times;</button>';
document.getElementById('contact-links-list').appendChild(row);
});
})();
</script>
{% endblock %}