feat: add custom admin assets to dynamically toggle approval_except_urgent field visibility

loko/contracts/admin.py

@@ -158,6 +158,12 @@ class ContractAdmin(admin.ModelAdmin):
         }),
     )
 
+    class Media:
+        css = {
+            'all': ('contracts/css/contract_admin.css',)
+        }
+        js = ('contracts/js/contract_admin.js',)
+
     def thematics_list(self, obj):
         return ", ".join([thematic.name for thematic in obj.thematics.all()])
     thematics_list.short_description = 'Thématiques'

loko/contracts/static/contracts/css/contract_admin.css

@@ -0,0 +1,16 @@
+/* Indentation et mise en valeur ergonomique de l'option "Sauf si urgence" */
+.form-row.field-approval_except_urgent {
+    margin-left: 32px !important;
+    padding-left: 16px !important;
+    border-left: 3px solid #79aec8 !important;
+    background-color: rgba(121, 174, 200, 0.04);
+    transition: opacity 0.2s ease-in-out;
+}
+
+.form-row.field-approval_except_urgent .checkbox-row {
+    position: relative;
+}
+
+.form-row.field-approval_except_urgent label {
+    font-weight: 500;
+}

loko/contracts/static/contracts/js/contract_admin.js

@@ -0,0 +1,19 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const needsApprovalCheckbox = document.getElementById('id_needs_approval');
+    const exceptUrgentRow = document.querySelector('.form-row.field-approval_except_urgent');
+
+    if (needsApprovalCheckbox && exceptUrgentRow) {
+        function syncExceptUrgentVisibility() {
+            if (needsApprovalCheckbox.checked) {
+                exceptUrgentRow.style.opacity = '1';
+                exceptUrgentRow.style.pointerEvents = 'auto';
+            } else {
+                exceptUrgentRow.style.opacity = '0.45';
+                exceptUrgentRow.style.pointerEvents = 'none';
+            }
+        }
+
+        needsApprovalCheckbox.addEventListener('change', syncExceptUrgentVisibility);
+        syncExceptUrgentVisibility();
+    }
+});