Update logic of editing links

This commit is contained in:
2024-10-05 17:58:20 +10:00
parent 7cbeeb90f6
commit 60bfcf2017
3 changed files with 68 additions and 16 deletions
BIN
View File
Binary file not shown.
+56 -16
View File
@@ -18,40 +18,65 @@
<!-- Link Type Tabs -->
<div class="mb-4">
<div class="flex border-b border-gray-200">
<button type="button" class="py-2 px-4 text-sm font-medium text-center text-blue-600 border-b-2 border-blue-600 hover:text-blue-700 hover:border-blue-700 focus:outline-none" id="link-tab">
<button type="button" class="py-2 px-4 text-sm font-medium text-center {% if not is_custom %}text-blue-600 border-b-2 border-blue-600{% else %}text-gray-500 border-b-2 border-transparent{% endif %} hover:text-blue-700 hover:border-blue-700 focus:outline-none" id="link-tab">
{% trans "Link" %}
</button>
<button type="button" class="py-2 px-4 text-sm font-medium text-center text-gray-500 border-b-2 border-transparent hover:text-gray-700 hover:border-gray-300 focus:outline-none" id="custom-tab">
<button type="button" class="py-2 px-4 text-sm font-medium text-center {% if is_custom %}text-blue-600 border-b-2 border-blue-600{% else %}text-gray-500 border-b-2 border-transparent{% endif %} hover:text-gray-700 hover:border-gray-300 focus:outline-none" id="custom-tab">
{% trans "Custom" %}
</button>
</div>
</div>
<!-- Link Type Description -->
<div id="link-description" class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-4">
<div id="link-description" class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-4 {% if is_custom %}hidden{% endif %}">
<p class="text-sm text-blue-700">
{% trans "Link type is used for redirecting to an external URL. Use this when you want to create a short alias for a long URL." %}
</p>
</div>
<div id="custom-description" class="bg-green-50 border-l-4 border-green-400 p-4 mb-4 hidden">
<div id="custom-description" class="bg-green-50 border-l-4 border-green-400 p-4 mb-4 {% if not is_custom %}hidden{% endif %}">
<p class="text-sm text-green-700">
{% trans "Custom type allows you to create a link with custom HTML content. Use this when you want to display a message or custom content instead of redirecting." %}
</p>
</div>
<!-- Form -->
<form method="post" class="space-y-6">
{% csrf_token %}
<input type="hidden" name="link_type" id="id_link_type" value="LINK">
<input type="hidden" name="link_type" id="id_link_type" value="{{ form.link_type.value|default:'LINK' }}">
{% for field in form %}
{% if field.name != 'link_type' %}
<div class="space-y-1 {% if field.name == 'original_url' %}link-field{% elif field.name == 'text' %}custom-field hidden{% endif %}">
<label for="{{ field.id_for_label }}" class="block text-sm font-medium text-gray-700">
<!-- Render fields based on link type -->
<div class="space-y-1 {% if field.name == 'original_url' %}link-field{% if is_custom %}hidden{% endif %}{% elif field.name == 'text' %}custom-field{% if not is_custom %}hidden{% endif %}{% endif %}">
<label for="{{ field.id_for_label }}" class="block text-sm font-medium text-gray-700 {% if field.name == 'original_url' and is_custom or field.name == 'text' and not is_custom %}hidden{% endif %}">
{{ field.label }}
</label>
<div class="mt-1">
{% if field.name == 'text' %}
{{ field }}
<!-- Render text field only for custom links -->
{% if is_custom %}
{{ field }}
{% endif %}
{% elif field.name == 'original_url' %}
<!-- Render original_url field only for default links -->
{% if not is_custom %}
<input type="{{ field.field.widget.input_type }}"
name="{{ field.name }}"
id="{{ field.id_for_label }}"
value="{{ field.value|default_if_none:'' }}"
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
{% if field.field.required %}required{% endif %}>
{% endif %}
{% elif field.name == 'alias' and form.instance.pk %}
<!-- Render alias field as read-only when editing -->
<input type="text"
name="{{ field.name }}"
id="{{ field.id_for_label }}"
value="{{ field.value|default_if_none:'' }}"
class="mt-1 block w-full rounded-md border-gray-300 bg-gray-100 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
readonly>
<p class="mt-2 text-sm text-yellow-600">{% trans "Alias cannot be changed after creation." %}</p>
{% else %}
<!-- Render other fields normally -->
<input type="{{ field.field.widget.input_type }}"
name="{{ field.name }}"
id="{{ field.id_for_label }}"
@@ -104,8 +129,14 @@
linkTab.classList.remove('text-gray-500', 'border-transparent');
customTab.classList.remove('text-blue-600', 'border-blue-600');
customTab.classList.add('text-gray-500', 'border-transparent');
linkFields.forEach(field => field.classList.remove('hidden'));
customFields.forEach(field => field.classList.add('hidden'));
linkFields.forEach(field => {
field.classList.remove('hidden');
field.querySelector('label').classList.remove('hidden');
});
customFields.forEach(field => {
field.classList.add('hidden');
field.querySelector('label').classList.add('hidden');
});
linkDescription.classList.remove('hidden');
customDescription.classList.add('hidden');
linkTypeInput.value = 'LINK';
@@ -116,8 +147,14 @@
customTab.classList.remove('text-gray-500', 'border-transparent');
linkTab.classList.remove('text-blue-600', 'border-blue-600');
linkTab.classList.add('text-gray-500', 'border-transparent');
customFields.forEach(field => field.classList.remove('hidden'));
linkFields.forEach(field => field.classList.add('hidden'));
customFields.forEach(field => {
field.classList.remove('hidden');
field.querySelector('label').classList.remove('hidden');
});
linkFields.forEach(field => {
field.classList.add('hidden');
field.querySelector('label').classList.add('hidden');
});
customDescription.classList.remove('hidden');
linkDescription.classList.add('hidden');
linkTypeInput.value = 'CUSTOM';
@@ -126,14 +163,17 @@
linkTab.addEventListener('click', showLinkFields);
customTab.addEventListener('click', showCustomFields);
// 初始化表单状态
showLinkFields();
// Initialize form state
if (linkTypeInput.value === 'CUSTOM') {
showCustomFields();
} else {
showLinkFields();
}
// Initialize SimpleMDE for custom links
var textArea = document.getElementById('id_text');
if (textArea) {
var simplemde = new SimpleMDE({ element: textArea });
} else {
console.error('SimpleMDE: Error. No element was found with id "id_text".');
}
});
</script>
+12
View File
@@ -93,6 +93,18 @@ class LinkUpdateView(UpdateView):
template_name = 'links/link_form.html'
success_url = reverse_lazy('link_list')
def get_initial(self):
initial = super().get_initial()
link = self.get_object()
initial['link_type'] = link.link_type
return initial
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
link = self.get_object()
context['is_custom'] = link.link_type == Link.LinkType.CUSTOM
return context
def form_valid(self, form):
form.instance.alias = form.instance.alias.lower()
alias = form.cleaned_data.get('alias').lower()