From 60bfcf201702545075fcd9e52e1b827f5222952e Mon Sep 17 00:00:00 2001
From: Junwei Zhao <wahyd4@gmail.com>
Date: Sat, 5 Oct 2024 17:58:20 +1000
Subject: [PATCH] Update logic of editing links

---
 data/db.sqlite3                      | Bin 192512 -> 192512 bytes
 links/templates/links/link_form.html |  72 +++++++++++++++++++++------
 links/views.py                       |  12 +++++
 3 files changed, 68 insertions(+), 16 deletions(-)

diff --git a/data/db.sqlite3 b/data/db.sqlite3
index 0e914eb3cbafaebe39c1d98e061b85b50a271721..8109e97a778bf2321ed7e3e8f695f8ef5118ce4b 100644
GIT binary patch
delta 91
zcmV-h0Hptb;0u7@3y>QD?2#Np0qlWbg<t`-U;?IJ0d$uKU;;(~bdixJ40C}J2>=xU
xK|u%^WtWR!0xS$QH##yoE;%?kH8ePv!(aj@3k?bl3RQ4qVRU6=x9VU57LQ1g8?XQX

delta 79
zcmV-V0I>gn;0u7@3y>QD>yaEo0qcQag<t`-U;?IJ0e_bVU;;(~f02<f3}}H82>=xU
lK|u%^PnUpT0xS$PH###pE;TSXGBGxnxL^V&x9VU57LOlH7=r)+

diff --git a/links/templates/links/link_form.html b/links/templates/links/link_form.html
index dc61875..8350dff 100644
--- a/links/templates/links/link_form.html
+++ b/links/templates/links/link_form.html
@@ -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>
diff --git a/links/views.py b/links/views.py
index 47731b4..aa73b78 100644
--- a/links/views.py
+++ b/links/views.py
@@ -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()