Display: Fix styles for panel groups inside form - refs BT#21588

assets/css/scss/molecules/_legacy_panel.scss

@@ -6,11 +6,21 @@
       before:content-[""] before:absolute before:rounded-l-lg before:bg-secondary before:w-1 before:h-full before:-left-1;
 
     a {
-      @apply cursor-pointer p-2 block bg-support-6 rounded-r-lg;
+      @apply cursor-pointer p-2 block bg-support-6 rounded-r-lg border-y border-y-gray-25 border-r border-r-gray-25;
 
       &[aria-expanded=true] {
         @apply rounded-b-none;
       }
+
+      &::before {
+        @apply mr-1;
+
+        float: left;
+      }
+
+      .ch-tool-icon.mdi {
+        @apply mr-1;
+      }
     }
   }
 

public/main/inc/lib/formvalidator/FormValidator.class.php

@@ -1009,8 +1009,9 @@ EOT;
         return true;
     }
 
-    public function addStartPanel(string $id, string $title, bool $open = false, $icon = null)
+    public function addStartPanel(string $id, string $title, bool $open = false, $icon = null): void
     {
+        // Same code as in Display::panelCollapse
         $parent = null;
         $javascript = '
         <script>
@@ -1022,6 +1023,9 @@ EOT;
                     button.addEventListener("click", function() {
                         menus.forEach((menu, menuIndex) => {
                             if (index === menuIndex) {
+                                button.setAttribute("aria-expanded", "true" === button.getAttribute("aria-expanded") ? "false" : "true")
+                                button.classList.toggle("mdi-chevron-down")
+                                button.classList.toggle("mdi-chevron-up")
                                 menu.classList.toggle("active");
                             } else {
                                 menu.classList.remove("active");
@@ -1039,30 +1043,28 @@ EOT;
             $htmlIcon = Display::getMdiIcon($icon, 'ch-tool-icon', 'float:left;', ICON_SIZE_SMALL);
         }
         $html = '
-        <div class="mt-4 rounded-lg">
+        <div class="display-panel-collapse field">
-            <div class="px-4 bg-gray-100 border border-gray-50" id="card_'.$id.'">
+            <div class="display-panel-collapse__header" id="card_'.$id.'">
-                <h5>
+                <a role="button"
-                    <a role="button"
+                    class="mdi mdi-chevron-down"
-                        class="block cursor-pointer"
+                    data-toggle="collapse"
-                        data-toggle="collapse"
+                    data-target="#collapse_'.$id.'"
-                        data-target="#collapse_'.$id.'"
+                    aria-expanded="'.(($open) ? 'true' : 'false').'"
-                        aria-expanded="'.(($open) ? 'true' : 'false').'"
+                    aria-controls="collapse_'.$id.'"
-                        aria-controls="collapse_'.$id.'"
+                >
-                    >
+                    '.$htmlIcon.'&nbsp;'.$title.'
-                        '.$htmlIcon.'&nbsp;'.$title.'
+                </a>
-                    </a>
-                </h5>
             </div>
             <div
                 id="collapse_'.$id.'"
-                class="px-4 border border-gray-50 bg-white collapse custom-collapse '.(($open) ? 'show' : '').'"
+                class="display-panel-collapse__collapsible '.(($open) ? 'active' : '').'"
             >
                 <div id="collapse_contant_'.$id.'"  class="card-body ">';
 
         $this->addHtml($html);
     }
 
-    public function addEndPanel()
+    public function addEndPanel(): void
     {
         $this->addHtml('</div></div></div>');
     }

public/main/search/search.php

@@ -220,11 +220,11 @@ if (!empty($items)) {
     }
 }
 
-if (isset($defaults['extra_access_start_date']) && isset($defaults['extra_access_start_date'][0])) {
+if (isset($defaults['extra_access_start_date'][0])) {
     $defaults['extra_access_start_date'] = $defaults['extra_access_start_date'][0];
 }
 
-if (isset($defaults['extra_access_end_date']) && isset($defaults['extra_access_end_date'][0])) {
+if (isset($defaults['extra_access_end_date'][0])) {
     $defaults['extra_access_end_date'] = $defaults['extra_access_end_date'][0];
 }
 
@@ -304,12 +304,14 @@ $extra = $extraFieldSession->addElements(
     $adminPermissions
 );
 
-$userForm->addRule(
+if ($userForm->hasElement('extra_access_start_date')) {
-    ['extra_access_start_date', 'extra_access_end_date'],
+    $userForm->addRule(
-    get_lang('StartDateMustBeBeforeTheEndDate'),
+        ['extra_access_start_date', 'extra_access_end_date'],
-    'compare_datetime_text',
+        get_lang('StartDateMustBeBeforeTheEndDate'),
-    '< allow_empty'
+        'compare_datetime_text',
-);
+        '< allow_empty'
+    );
+}
 
 $jqueryExtra .= $extra['jquery_ready_content'];
 
@@ -366,12 +368,14 @@ $extra = $extraField->addElements(
     $adminPermissions
 );
 
-$userForm->addRule(
+if ($userForm->hasElement('extra_datedebutstage')) {
-    ['extra_datedebutstage', 'extra_datefinstage'],
+    $userForm->addRule(
-    get_lang('StartDateMustBeBeforeTheEndDate'),
+        ['extra_datedebutstage', 'extra_datefinstage'],
-    'compare_datetime_text',
+        get_lang('StartDateMustBeBeforeTheEndDate'),
-    '< allow_empty'
+        'compare_datetime_text',
-);
+        '< allow_empty'
+    );
+}
 
 $jqueryExtra .= $extra['jquery_ready_content'];
 
@@ -568,6 +572,7 @@ $(function () {
 </script>';
 
 $userForm->addButtonSave(get_lang('Send'));
+$userForm->addHtml('</div>');
 
 $userForm->setDefaults($defaults);