Afform - Handle details element at runtime

UshaMakoa · Dec 4, 2023 · b3d9dd8 · b3d9dd8
1 parent f08c34d
commit b3d9dd8
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 20 deletions.
diff --git a/ext/afform/core/ang/af/afTitle.directive.js b/ext/afform/core/ang/af/afTitle.directive.js
@@ -10,15 +10,16 @@
         var ctrl = this;
 
         $scope.$watch(function() {return ctrl.title;}, function(text) {
-          var tag = $element.is('fieldset') ? 'legend' : 'h4',
-            $title = $element.children(tag + '.af-title');
+          let tag = 'h4';
+          if ($element.is('fieldset')) {
+            tag = 'legend';
+          }
+          if ($element.is('details')) {
+            tag = 'summary';
+          }
+          let $title = $element.children(tag + '.af-title');
           if (!$title.length) {
             $title = $('<' + tag + ' class="af-title" />').prependTo($element);
-            if ($element.hasClass('af-collapsible')) {
-              $title.click(function() {
-                $element.toggleClass('af-collapsed');
-              });
-            }
           }
           $title.text(text);
         });

diff --git a/ext/civicrm_search_ui/ang/afsearchFindContributions.aff.html b/ext/civicrm_search_ui/ang/afsearchFindContributions.aff.html
@@ -1,13 +1,13 @@
 <div af-fieldset="">
   <p class="af-text">This is intended as a replacement for the Find Contributions page.&nbsp; Please provide feedback at https://lab.civicrm.org/dev/core/-/issues/4440</p>
-  <div class="af-container af-layout-inline af-collapsible" af-title="Contact Filters">
+  <details class="af-container af-layout-inline" open af-title="Contact Filters">
     <af-field name="Contribution_Contact_contact_id_01.display_name,Contribution_Contact_contact_id_01.sort_name,Contribution_Contact_contact_id_01.email_primary.email" defn="{label: 'Name or Email', input_type: 'Text'}" />
     <af-field name="Contribution_Contact_contact_id_01.tags" defn="{input_attrs: {multiple: true}}" />
     <af-field name="Contribution_Contact_contact_id_01.groups" defn="{input_attrs: {multiple: true}}" />
     <af-field name="Contribution_Contact_contact_id_01.contact_type" defn="{input_attrs: {multiple: true}}" />
     <af-field name="Contribution_Contact_contact_id_01.is_deleted" defn="{required: false, label: 'Search in Trash (deleted contacts)'}" />
-  </div>
-  <div class="af-container af-layout-inline af-collapsible" af-title="Common Filters">
+  </details>
+  <details class="af-container af-layout-inline" open af-title="Common Filters">
     <af-field name="receive_date" defn="{input_type: 'Select', search_range: true, options: [{id: '{}', label: 'Choose Date Range'}, {id: 'this.day', label: 'Today'}, {id: 'this.week', label: 'This week'}, {id: 'this.month', label: 'This calendar month'}, {id: 'this.quarter', label: 'This quarter'}, {id: 'this.fiscal_year', label: 'This fiscal year'}, {id: 'this.year', label: 'This calendar year'}, {id: 'previous.day', label: 'Yesterday'}, {id: 'previous.week', label: 'Previous week'}, {id: 'previous.month', label: 'Previous calendar month'}, {id: 'previous.quarter', label: 'Previous quarter'}, {id: 'previous.fiscal_year', label: 'Previous fiscal year'}, {id: 'previous.year', label: 'Previous calendar year'}, {id: 'ending.week', label: 'Last 7 days including today'}, {id: 'ending_30.day', label: 'Last 30 days including today'}, {id: 'ending_60.day', label: 'Last 60 days including today'}, {id: 'ending_90.day', label: 'Last 90 days including today'}, {id: 'ending.year', label: 'Last 12 months including today'}, {id: 'ending_2.year', label: 'Last 2 years including today'}, {id: 'ending_3.year', label: 'Last 3 years including today'}, {id: 'starting.day', label: 'Tomorrow'}, {id: 'next.week', label: 'Next week'}, {id: 'next.month', label: 'Next calendar month'}, {id: 'next.quarter', label: 'Next quarter'}, {id: 'next.fiscal_year', label: 'Next fiscal year'}, {id: 'next.year', label: 'Next calendar year'}, {id: 'starting.week', label: 'Next 7 days including today'}, {id: 'starting.month', label: 'Next 30 days including today'}, {id: 'starting_2.month', label: 'Next 60 days including today'}, {id: 'starting.quarter', label: 'Next 90 days including today'}, {id: 'starting.year', label: 'Next 12 months including today'}, {id: 'current.week', label: 'Current week to-date'}, {id: 'current.month', label: 'Current calendar month to-date'}, {id: 'current.quarter', label: 'Current quarter to-date'}, {id: 'current.year', label: 'Current calendar year to-date'}, {id: 'earlier.day', label: 'To end of yesterday'}, {id: 'earlier.week', label: 'To end of previous week'}, {id: 'earlier.month', label: 'To end of previous calendar month'}, {id: 'earlier.quarter', label: 'To end of previous quarter'}, {id: 'earlier.year', label: 'To end of previous calendar year'}, {id: 'greater.day', label: 'From start of current day'}, {id: 'greater.week', label: 'From start of current week'}, {id: 'greater.month', label: 'From start of current calendar month'}, {id: 'greater.quarter', label: 'From start of current quarter'}, {id: 'greater.year', label: 'From start of current calendar year'}, {id: 'less.week', label: 'To end of current week'}, {id: 'less.month', label: 'To end of current calendar month'}, {id: 'less.quarter', label: 'To end of current quarter'}, {id: 'less.year', label: 'To end of current calendar year'}, {id: 'previous_2.day', label: 'Previous 2 days'}, {id: 'previous_2.week', label: 'Previous 2 weeks'}, {id: 'previous_2.month', label: 'Previous 2 calendar months'}, {id: 'previous_2.quarter', label: 'Previous 2 quarters'}, {id: 'previous_2.year', label: 'Previous 2 calendar years'}, {id: 'previous_2.fiscal_year', label: 'Previous 2 fiscal years'}, {id: 'previous_before.day', label: 'Day prior to yesterday'}, {id: 'previous_before.week', label: 'Week prior to previous week'}, {id: 'previous_before.month', label: 'Month prior to previous calendar month'}, {id: 'previous_before.quarter', label: 'Quarter prior to previous quarter'}, {id: 'previous_before.year', label: 'Year prior to previous calendar year'}, {id: 'previous_before.fiscal_year', label: 'Fiscal year prior to previous fiscal year'}, {id: 'greater_previous.week', label: 'From end of previous week'}, {id: 'greater_previous.month', label: 'From end of previous calendar month'}, {id: 'greater_previous.quarter', label: 'From end of previous quarter'}, {id: 'greater_previous.year', label: 'From end of previous calendar year'}], input_attrs: {}}" />
     <af-field name="total_amount" defn="{required: false, input_attrs: {}, input_type: 'Number', search_range: true, label: 'Total Amount (min, max)'}" />
     <af-field name="contribution_status_id" defn="{input_attrs: {multiple: true}, afform_default: ['1']}" />
@@ -16,31 +16,31 @@
     <af-field name="contribution_page_id" defn="{input_attrs: {multiple: true}}" />
     <af-field name="source" />
     <af-field name="id" defn="{required: false, input_attrs: {}}" />
-  </div>
-  <div class="af-container af-layout-inline af-collapsible af-collapsed" af-title="Yes/No">
+  </details>
+  <div class="af-container af-layout-inline" af-title="Yes/No">
     <af-field name="ISNULL_thankyou_date" defn="{input_type: 'Radio', search_operator: '!=', label: 'Thank-you Sent?'}" />
     <af-field name="ISNULL_receipt_date" defn="{input_type: 'Radio', search_operator: '!=', label: 'Receipt Sent?'}" />
     <af-field name="is_pay_later" defn="{required: false, input_type: 'Radio', label: 'Contribution is Pay Later?'}" />
     <af-field name="is_test" defn="{input_type: 'Radio', required: false, afform_default: '0', label: 'Contribution is a Test?'}" />
     <af-field name="is_template" defn="{required: false, input_type: 'Radio', afform_default: '0', label: 'Contribution is a Template?'}" />
     <af-field name="ISNULL_contribution_recur_id" defn="{input_type: 'Radio', search_operator: '!=', label: 'Contribution is Recurring?'}" />
   </div>
-  <div class="af-container af-layout-inline af-collapsible af-collapsed" af-title="Less Common Filters">
+  <details class="af-container af-layout-inline" af-title="Less Common Filters">
     <af-field name="invoice_number" defn="{search_operator: 'IS EMPTY', input_attrs: {}, input_type: 'Number'}" />
     <af-field name="trxn_id" />
     <af-field name="cancel_date" defn="{input_type: 'Select', search_range: true, options: [{id: '{}', label: 'Choose Date Range'}, {id: 'this.day', label: 'Today'}, {id: 'this.week', label: 'This week'}, {id: 'this.month', label: 'This calendar month'}, {id: 'this.quarter', label: 'This quarter'}, {id: 'this.fiscal_year', label: 'This fiscal year'}, {id: 'this.year', label: 'This calendar year'}, {id: 'previous.day', label: 'Yesterday'}, {id: 'previous.week', label: 'Previous week'}, {id: 'previous.month', label: 'Previous calendar month'}, {id: 'previous.quarter', label: 'Previous quarter'}, {id: 'previous.fiscal_year', label: 'Previous fiscal year'}, {id: 'previous.year', label: 'Previous calendar year'}, {id: 'ending.week', label: 'Last 7 days including today'}, {id: 'ending_30.day', label: 'Last 30 days including today'}, {id: 'ending_60.day', label: 'Last 60 days including today'}, {id: 'ending_90.day', label: 'Last 90 days including today'}, {id: 'ending.year', label: 'Last 12 months including today'}, {id: 'ending_2.year', label: 'Last 2 years including today'}, {id: 'ending_3.year', label: 'Last 3 years including today'}, {id: 'starting.day', label: 'Tomorrow'}, {id: 'next.week', label: 'Next week'}, {id: 'next.month', label: 'Next calendar month'}, {id: 'next.quarter', label: 'Next quarter'}, {id: 'next.fiscal_year', label: 'Next fiscal year'}, {id: 'next.year', label: 'Next calendar year'}, {id: 'starting.week', label: 'Next 7 days including today'}, {id: 'starting.month', label: 'Next 30 days including today'}, {id: 'starting_2.month', label: 'Next 60 days including today'}, {id: 'starting.quarter', label: 'Next 90 days including today'}, {id: 'starting.year', label: 'Next 12 months including today'}, {id: 'current.week', label: 'Current week to-date'}, {id: 'current.month', label: 'Current calendar month to-date'}, {id: 'current.quarter', label: 'Current quarter to-date'}, {id: 'current.year', label: 'Current calendar year to-date'}, {id: 'earlier.day', label: 'To end of yesterday'}, {id: 'earlier.week', label: 'To end of previous week'}, {id: 'earlier.month', label: 'To end of previous calendar month'}, {id: 'earlier.quarter', label: 'To end of previous quarter'}, {id: 'earlier.year', label: 'To end of previous calendar year'}, {id: 'greater.day', label: 'From start of current day'}, {id: 'greater.week', label: 'From start of current week'}, {id: 'greater.month', label: 'From start of current calendar month'}, {id: 'greater.quarter', label: 'From start of current quarter'}, {id: 'greater.year', label: 'From start of current calendar year'}, {id: 'less.week', label: 'To end of current week'}, {id: 'less.month', label: 'To end of current calendar month'}, {id: 'less.quarter', label: 'To end of current quarter'}, {id: 'less.year', label: 'To end of current calendar year'}, {id: 'previous_2.day', label: 'Previous 2 days'}, {id: 'previous_2.week', label: 'Previous 2 weeks'}, {id: 'previous_2.month', label: 'Previous 2 calendar months'}, {id: 'previous_2.quarter', label: 'Previous 2 quarters'}, {id: 'previous_2.year', label: 'Previous 2 calendar years'}, {id: 'previous_2.fiscal_year', label: 'Previous 2 fiscal years'}, {id: 'previous_before.day', label: 'Day prior to yesterday'}, {id: 'previous_before.week', label: 'Week prior to previous week'}, {id: 'previous_before.month', label: 'Month prior to previous calendar month'}, {id: 'previous_before.quarter', label: 'Quarter prior to previous quarter'}, {id: 'previous_before.year', label: 'Year prior to previous calendar year'}, {id: 'previous_before.fiscal_year', label: 'Fiscal year prior to previous fiscal year'}, {id: 'greater_previous.week', label: 'From end of previous week'}, {id: 'greater_previous.month', label: 'From end of previous calendar month'}, {id: 'greater_previous.quarter', label: 'From end of previous quarter'}, {id: 'greater_previous.year', label: 'From end of previous calendar year'}], input_attrs: {}, afform_default: '{}'}" />
     <af-field name="cancel_reason" />
     <af-field name="payment_instrument_id" defn="{input_attrs: {multiple: true}}" />
-  </div>
-  <div class="af-container af-collapsible af-layout-inline af-collapsed" af-title="Soft Credit">
-    <legend class="af-text">Dev note:&nbsp; several options currently - need to understand soft credits better! &nbsp;</legend>
+  </details>
+  <details class="af-container af-layout-inline" af-title="Soft Credit">
+    <!-- Dev note: several options currently - need to understand soft credits better!-->
     <af-field name="Contribution_ContributionSoft_contribution_id_01.id" />
-  </div>
-  <div class="af-container af-collapsible af-layout-inline af-collapsed" af-title="PCP">
-    <legend class="af-text">Dev note: want this as page name select. &nbsp; Does anyone use PCP's???</legend>
+  </details>
+  <details class="af-container af-layout-inline" af-title="PCP">
+    <!-- Dev note: want this as page name select. Does anyone use PCP's???-->
     <af-field name="Contribution_ContributionSoft_contribution_id_01_ContributionSoft_PCP_pcp_id_01.id" />
     <af-field name="Contribution_ContributionSoft_contribution_id_01_ContributionSoft_PCP_pcp_id_01.is_honor_roll" defn="{label: 'Honor Roll?'}" />
-  </div>
+  </details>
   <div class="af-container" af-title="Summary">
     <crm-search-display-table search-name="Find_Contributions_totals" display-name="Find_Contributions_totals_Table_1"></crm-search-display-table>
   </div>