mirror of
https://github.com/wahyd4/links.git
synced 2026-08-09 05:06:16 +10:00
Update logic of editing links
This commit is contained in:
Binary file not shown.
@@ -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>
|
||||
|
||||
@@ -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()
|
||||
|
||||
Reference in New Issue
Block a user