feat: readonly fields with links (#445)

Author: lukasvinclav

src/unfold/admin.py

@@ -7,7 +7,7 @@
 from django.contrib.admin import StackedInline as BaseStackedInline
 from django.contrib.admin import TabularInline as BaseTabularInline
 from django.contrib.admin import display, helpers
-from django.contrib.admin.utils import lookup_field
+from django.contrib.admin.utils import lookup_field, quote
 from django.contrib.admin.widgets import RelatedFieldWidgetWrapper
 from django.core.exceptions import ObjectDoesNotExist
 from django.db import models
@@ -33,7 +33,7 @@
 from django.shortcuts import redirect
 from django.template.defaultfilters import linebreaksbr
 from django.template.response import TemplateResponse
-from django.urls import URLPattern, path, reverse
+from django.urls import NoReverseMatch, URLPattern, path, reverse
 from django.utils.html import conditional_escape, format_html
 from django.utils.module_loading import import_string
 from django.utils.safestring import SafeText, mark_safe
@@ -220,6 +220,22 @@ def contents(self) -> str:
         contents = self._preprocess_field(contents)
         return contents
 
+    def get_admin_url(self, remote_field, remote_obj):
+        url_name = f"admin:{remote_field.model._meta.app_label}_{remote_field.model._meta.model_name}_change"
+        try:
+            url = reverse(
+                url_name,
+                args=[quote(remote_obj.pk)],
+                current_app=self.model_admin.admin_site.name,
+            )
+            return format_html(
+                '<a href="{}" class="text-primary-600 underline">{}</a>',
+                url,
+                remote_obj,
+            )
+        except NoReverseMatch:
+            return str(remote_obj)
+
     def _get_contents(self) -> str:
         from django.contrib.admin.templatetags.admin_list import _boolean_icon
 
@@ -239,6 +255,7 @@ def _get_contents(self) -> str:
                 # ReadOnlyPasswordHashWidget.
                 if getattr(widget, "read_only", False):
                     return widget.render(field, value)
+
             if f is None:
                 if getattr(attr, "boolean", False):
                     result_repr = _boolean_icon(value)
@@ -255,6 +272,12 @@ def _get_contents(self) -> str:
                     and value is not None
                 ):
                     result_repr = self.get_admin_url(f.remote_field, value)
+                elif isinstance(f, models.URLField):
+                    return format_html(
+                        '<a href="{}" class="text-primary-600 underline">{}</a>',
+                        value,
+                        value,
+                    )
                 else:
                     result_repr = display_for_field(value, f, self.empty_value_display)
                     return conditional_escape(result_repr)

src/unfold/templates/admin/edit_inline/tabular.html

@@ -112,9 +112,7 @@ <h2 class="bg-gray-100 border border-transparent font-semibold mb-6 px-4 py-3 ro
                                                             {% if field.is_readonly or not field.field.is_hidden %}
                                                                 <td{% if field.field.name %} class="field-{{ field.field.name }}{% if field.field.errors|length > 0 %} errors{% endif %}{% if inline_admin_form.original %} p-3 lg:py-3{% else %} py-3{% endif %}{% if field.is_checkbox %} align-middle{% else %} align-top{% endif %} {% if is_last_row and not inline_admin_formset.has_add_permission %}{% if is_last_col %}border-0 {% else %}border-b lg:border-0{% endif %}{% else %}border-b{% endif %} border-gray-200 flex items-center before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-gray-500 before:w-72 lg:before:hidden font-normal px-3 text-left text-sm lg:table-cell dark:border-gray-800 {% if field.field.is_hidden %} !hidden{% endif %}"{% endif %} data-label="{{ field.field.label }}">
                                                                     {% if field.is_readonly %}
-                                                                        <div class="bg-gray-50 border font-medium max-w-lg px-3 py-2 rounded-md shadow-sm text-gray-500 text-sm truncate whitespace-nowrap dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800">
-                                                                            {{ field.contents }}
-                                                                        </div>
+                                                                        {% include "unfold/helpers/field_readonly_value.html" %}
                                                                     {% else %}
                                                                         {{ field.field }}
 

src/unfold/templates/admin/includes/fieldset.html

@@ -38,7 +38,7 @@ <h2 class="bg-gray-100 border border-transparent font-semibold mb-6 px-4 py-3 ro
                             </div>
 
                             {% if field.is_readonly %}
-                                <div class="readonly bg-gray-50 border font-medium max-w-2xl px-3 py-2 rounded-md shadow-sm text-gray-500 text-sm dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800 {% if field.is_json %}truncate whitespace-pre-wrap{% endif %}">{% if field.contents %}{{ field.contents }}{% else %}-{% endif %}</div>
+                                {% include "unfold/helpers/field_readonly_value.html" %}
                             {% else %}
                                 {{ field.field }}
                             {% endif %}

src/unfold/templates/unfold/helpers/field_readonly.html

@@ -3,7 +3,5 @@
         {{ title }}
     </label>
 
-    <div class="readonly bg-gray-50 border font-medium max-w-2xl px-3 py-2 rounded-md shadow-sm text-gray-500 text-sm dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400">
-        {{ value }}
-    </div>
+    {% include "unfold/helpers/field_readonly_value.html" %}
 </div>