multilanguage admin panel enhancement

update pattern with dropdown to choose language in a more convenient way

update language codes

update blog data appearance , avoiding to show the json data

apps/blog/admin.py

@@ -57,7 +57,7 @@ class BlogAdmin(ModelAdmin):
     Admin interface for Blog model using Django unfold
     """
     form = BlogAdminForm
-    list_display = ('title_info', 'slogan', 'views_count', 'created_at', 'updated_at')
+    list_display = ('title_info', 'slogan_info', 'views_count', 'created_at', 'updated_at')
     list_filter = ('created_at', 'updated_at')
     search_fields = ('title', 'slogan', 'summary')
     # prepopulated_fields = {'slug': ('title',)}
@@ -82,9 +82,13 @@ class BlogAdmin(ModelAdmin):
     
     inlines = [BlogContentInline]
     
-    @display(description=_('Title'), )
+    @display(description=_('Title'))
     def title_info(self, obj):
-        return str(obj.title)
+        return obj._extract_text_from_json(obj.title)
+    
+    @display(description=_('Slogan'))
+    def slogan_info(self, obj):
+        return obj._extract_text_from_json(obj.slogan)
     
     def get_queryset(self, request):
         queryset = super().get_queryset(request)
@@ -121,6 +125,6 @@ class BlogContentAdmin(ModelAdmin):
     readonly_fields = ('created_at', 'updated_at')
     
 
-    @display(description=_('Title'), )
+    @display(description=_('Title'))
     def title_info(self, obj):
-        return str(obj.title)    
+        return Blog._extract_text_from_json(obj.title)

templates/utils/widgets/multilang_json_widget.html

@@ -1,17 +1,18 @@
 {% load i18n %}
 <div class="space-y-3 max-w-2xl" data-multilang-json data-field-name="{{ widget.field_name }}">
-  <div class="relative">
-    <div class="w-full max-w-2xl overflow-x-auto scrollbar-hover pr-2">
-      <div class="inline-flex flex-nowrap items-center gap-1 whitespace-nowrap py-1 min-w-max" data-lang-bar>
-        {% for code in widget.languages %}
-          <button type="button"
-                  class="lang-btn px-3 py-1.5 rounded-md border transition-all duration-150 text-xs font-medium
-                         border-gray-200 text-gray-700 hover:bg-gray-50 hover:border-gray-300
-                         dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:border-gray-600{% if widget.has_value_codes and code in widget.has_value_codes %} has-value{% endif %}"
-                  data-lang-code="{{ code }}">
-            {{ code|upper }}
-          </button>
-        {% endfor %}
+  <div>
+    <div class="w-full max-w-2xl pr-2">
+      <div class="flex items-center gap-2 py-1.5">
+        <span class="text-xs font-semibold text-font-subtle-light dark:text-font-subtle-dark uppercase tracking-wider">
+          {% trans "Select Language" %}:
+        </span>
+        <select class="lang-select border border-base-200 bg-white font-semibold min-w-[120px] rounded shadow-sm text-font-default-light text-xs focus:ring focus:ring-primary-300 focus:border-primary-600 focus:outline-none dark:bg-base-900 dark:border-base-700 dark:text-font-default-dark dark:focus:border-primary-600 dark:focus:ring-primary-700 dark:focus:ring-opacity-50 px-3 py-1.5" data-lang-select>
+          {% for code in widget.languages %}
+            <option value="{{ code }}">
+              {{ code|upper }}{% if widget.has_value_codes and code in widget.has_value_codes %} ✓{% endif %}
+            </option>
+          {% endfor %}
+        </select>
       </div>
     </div>
   </div>
@@ -36,64 +37,6 @@
 </div>
 
 <style>
-  .scrollbar-hover {
-    --scrollbar-track: rgb(var(--color-base-100));
-    --scrollbar-thumb: rgb(var(--color-base-300));
-    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
-    scrollbar-width: none;
-  }
-  .scrollbar-hover:hover { scrollbar-width: thin; }
-  .dark .scrollbar-hover { --scrollbar-track: rgb(var(--color-base-800)); --scrollbar-thumb: rgb(var(--color-base-600)); }
-  .scrollbar-hover::-webkit-scrollbar { height: 0; }
-  .scrollbar-hover:hover::-webkit-scrollbar { height: 6px; }
-  .scrollbar-hover::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 3px; }
-  .scrollbar-hover::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
-  .scrollbar-hover::-webkit-scrollbar-corner { background: var(--scrollbar-track); }
-  .scrollbar-hover:hover::-webkit-scrollbar-thumb:hover { background: rgb(var(--color-base-400)); }
-  .dark .scrollbar-hover:hover::-webkit-scrollbar-thumb:hover { background: rgb(var(--color-base-500)); }
-
-  .lang-btn { 
-    background: transparent; 
-    cursor: pointer;
-    transition: all 0.15s ease;
-  }
-  .lang-btn:hover { 
-    background: #f8f9fa; 
-    border-color: #dee2e6; 
-  }
-  .dark .lang-btn:hover { 
-    background: #343a40; 
-    border-color: #6c757d; 
-  }
-  .lang-btn.is-active { 
-    border-color: #3b82f6; 
-    background: #eff6ff; 
-    color: #1d4ed8; 
-    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.25); 
-  }
-  .dark .lang-btn.is-active { 
-    border-color: #2563eb; 
-    background: #1e3a8a; 
-    color: #dbeafe; 
-    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.5); 
-  }
-  .lang-btn.has-value { 
-    border-color: #3b82f6; 
-    color: #1d4ed8; 
-  }
-  .dark .lang-btn.has-value { 
-    border-color: #3b82f6; 
-    color: #dbeafe; 
-  }
-  .lang-btn.is-active:hover { 
-    background: #eff6ff; 
-    border-color: #3b82f6; 
-  }
-  .dark .lang-btn.is-active:hover { 
-    background: #1e3a8a; 
-    border-color: #2563eb; 
-  }
-
   /* Ensure hidden class works properly */
   [data-input-wrapper].hidden {
     display: none !important;
@@ -102,125 +45,64 @@
   [data-input-wrapper]:not(.hidden) {
     display: block !important;
   }
+
+  .lang-select {
+    cursor: pointer;
+    appearance: none !important;
+    -webkit-appearance: none !important;
+    -moz-appearance: none !important;
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E") !important;
+    background-repeat: no-repeat !important;
+    background-position: right 0.5rem center !important;
+    background-size: 1.25rem !important;
+    padding-right: 1.75rem !important;
+  }
+  
+  [dir="rtl"] .lang-select {
+    background-position: left 0.5rem center !important;
+    padding-right: 0.75rem !important;
+    padding-left: 1.75rem !important;
+  }
 </style>
 
 <script>
 (function () {
   function init(root) {
-    console.log('Initializing multilang widget:', root);
+    if (root.getAttribute("data-initialized") === "true") return;
+    root.setAttribute("data-initialized", "true");
     var fieldName = root.getAttribute("data-field-name");
-    if (!fieldName) {
-      console.log('No field name found');
-      return;
-    }
+    if (!fieldName) return;
 
-    var buttons = root.querySelectorAll(".lang-btn[data-lang-code]");
+    var select = root.querySelector("[data-lang-select]");
     var inputsRoot = root.querySelector("[data-inputs]");
-    if (!inputsRoot) {
-      console.log('No inputs root found');
-      return;
-    }
-
-    console.log('Found', buttons.length, 'language buttons');
+    if (!inputsRoot || !select) return;
 
     // First, hide all wrappers
     inputsRoot.querySelectorAll('[data-input-wrapper]').forEach(function (w) { 
       w.classList.add("hidden"); 
     });
 
-    var hasActiveLanguage = false;
-    var withValue = [];
-    var withoutValue = [];
-    buttons.forEach(function (btn) {
-      var code = btn.getAttribute("data-lang-code");
-      var wrapper = inputsRoot.querySelector('[data-input-wrapper][data-lang-code="' + code + '"]');
-      var hasValue = false;
-      if (wrapper) {
-        var input = wrapper.querySelector('input[name="' + fieldName + '__' + code + '"], textarea[name="' + fieldName + '__' + code + '"], input[id*="' + fieldName + '__' + code + '"]');
-        hasValue = !!(input && input.value && input.value.trim() !== "");
-      }
-      if (hasValue) {
-        btn.classList.add("has-value");
-        withValue.push(btn);
-        if (!hasActiveLanguage && wrapper) {
-          btn.classList.add("is-active");
-          wrapper.classList.remove("hidden");
-          hasActiveLanguage = true;
-          console.log('Initializing with active language:', code);
-        }
-      } else {
-        withoutValue.push(btn);
-      }
-    });
-
-    if (!hasActiveLanguage && buttons.length) {
-      var firstBtn = (withValue[0] || buttons[0]);
-      var firstCode = firstBtn.getAttribute("data-lang-code");
-      var firstWrapper = inputsRoot.querySelector('[data-input-wrapper][data-lang-code="' + firstCode + '"]');
-      if (firstWrapper) {
-        firstBtn.classList.add("is-active");
-        firstWrapper.classList.remove("hidden");
-        console.log('Initializing with first language:', firstCode);
-      }
+    var selectedCode = select.value;
+    var wrapper = inputsRoot.querySelector('[data-input-wrapper][data-lang-code="' + selectedCode + '"]');
+    if (wrapper) {
+      wrapper.classList.remove("hidden");
     }
 
-    var bar = root.querySelector('[data-lang-bar]');
-    if (bar) {
-      withValue.concat(withoutValue).forEach(function (btn) {
-        bar.appendChild(btn);
-      });
-    }
-
-    buttons.forEach(function (btn) {
-      btn.addEventListener("click", function () {
-        console.log('Language button clicked:', btn.getAttribute("data-lang-code"));
-        var code = btn.getAttribute("data-lang-code");
-        var wrapper = inputsRoot.querySelector('[data-input-wrapper][data-lang-code="' + code + '"]');
-        if (!wrapper) {
-          console.log('No wrapper found for code:', code);
-          return;
-        }
+    select.addEventListener("change", function () {
+      var code = select.value;
+      var wrapper = inputsRoot.querySelector('[data-input-wrapper][data-lang-code="' + code + '"]');
+      if (!wrapper) return;
 
-        var isActive = btn.classList.contains("is-active");
-        console.log('Button is active:', isActive);
-        
-        // Remove active class from all buttons
-        buttons.forEach(function (b) { b.classList.remove("is-active"); });
-        
-        // Hide all input wrappers
-        inputsRoot.querySelectorAll('[data-input-wrapper]').forEach(function (w) { 
-          w.classList.add("hidden"); 
-          console.log('Hiding wrapper for:', w.getAttribute('data-lang-code'));
-        });
-        
-        // Always show the clicked wrapper and hide others
-        btn.classList.add("is-active");
-        wrapper.classList.remove("hidden");
-        console.log('Showing wrapper for:', code);
-        
-        var input = wrapper.querySelector('input, textarea');
-        if (input) { 
-          setTimeout(function(){ input.focus(); }, 50); 
-        }
-        
-        var hidden = root.querySelector('input[type="hidden"][name="' + fieldName + '"]');
-        if (hidden) {
-          var result = [];
-          inputsRoot.querySelectorAll('[data-input-wrapper]').forEach(function (w) {
-            var c = w.getAttribute('data-lang-code');
-            var inp = w.querySelector('input, textarea');
-            if (inp && inp.value && inp.value.trim() !== '') { 
-              result.push({ language_code: c, title: inp.value }); 
-            }
-          });
-          try { 
-            hidden.value = JSON.stringify(result); 
-            console.log('Updated hidden field value:', hidden.value);
-          } catch (e) { 
-            console.error('JSON stringify error:', e); 
-          }
-        }
+      inputsRoot.querySelectorAll('[data-input-wrapper]').forEach(function (w) { 
+        w.classList.add("hidden"); 
       });
+      
+      wrapper.classList.remove("hidden");
+      
+      var input = wrapper.querySelector('input, textarea');
+      if (input) { 
+        setTimeout(function(){ input.focus(); }, 50); 
+      }
     });
 
     var hidden = root.querySelector('input[type="hidden"][name="' + fieldName + '"]');
@@ -231,13 +113,14 @@
           inputsRoot.querySelectorAll('[data-input-wrapper]').forEach(function (w) {
             var c = w.getAttribute('data-lang-code');
             var i = w.querySelector('input, textarea');
+            var option = select.querySelector('option[value="' + c + '"]');
+            var baseText = c.toUpperCase();
+            
             if (i && i.value && i.value.trim() !== '') {
               result.push({ language_code: c, title: i.value });
-              var btn = root.querySelector('.lang-btn[data-lang-code="' + c + '"]');
-              if (btn) btn.classList.add('has-value');
+              if (option) option.textContent = baseText + ' ✓';
             } else {
-              var btn2 = root.querySelector('.lang-btn[data-lang-code="' + c + '"]');
-              if (btn2) btn2.classList.remove('has-value');
+              if (option) option.textContent = baseText;
             }
           });
           try { hidden.value = JSON.stringify(result); } catch (e) { console.error('JSON stringify error:', e); }
@@ -247,19 +130,15 @@
   }
 
   function initializeWidgets() {
-    console.log('Initializing all multilang widgets');
     document.querySelectorAll('[data-multilang-json]').forEach(init);
   }
 
-  // Try multiple initialization methods
   if (document.readyState === 'loading') {
     document.addEventListener("DOMContentLoaded", initializeWidgets);
   } else {
-    // DOM is already loaded
     initializeWidgets();
   }
 
-  // Also try after a short delay to ensure everything is ready
   setTimeout(initializeWidgets, 100);
 
   document.addEventListener("formset:added", function (event) {

utils/multilang_json_widget.py

@@ -57,22 +57,26 @@ class MultiLanguageJSONWidget(Widget):
         return child_media
 
     def _get_active_language_codes(self) -> list[str]:
-        codes: list[str] = []
-        if Language is not None:
-            try:
-                codes = list(
-                    Language.objects.filter(status=True).values_list("code", flat=True)  # type: ignore[attr-defined]
-                )
-            except Exception:
-                try:
-                    codes = list(Language.objects.values_list("code", flat=True))
-                except Exception:
-                    codes = []
-
-        if not codes:
-            codes = [code for code, _ in getattr(settings, "LANGUAGES", [("en", "English")])]
-
-        return list(dict.fromkeys(codes))
+        return [
+            "ar",  # Arabic
+            "tr",  # Turkish
+            "fa",  # Persian (Farsi)
+            "ur",  # Urdu
+            "bn",  # Bengali
+            "id",  # Indonesian
+            "fr",  # French
+            "ru",  # Russian
+            "uz",  # Uzbek
+            "ky",  # Kyrgyz
+            "tg",  # Tajik
+            "az",  # Azerbaijani
+            "en",  # English
+            "de",  # German
+            "zh",  # Mandarin Chinese
+            "ha",  # Hausa
+            "sw",  # Swahili
+            "es",  # Spanish
+        ]
 
     def _normalize_value(self, value: Any) -> dict[str, Any]:
         mapping: dict[str, Any] = {}