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:
@@ -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()">×</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()">×</button>';
|
||||
document.getElementById('contact-links-list').appendChild(row);
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user