MDL-70795 reportbuilder: theme updates for custom report editor.

Includes nice interactions for element drag & drop, consistent styling for templates and tidy up of element alignment/spacing.
moodle · Oct 19, 2021 · 9000d8d · 9000d8d
1 parent 09b69d0
commit 9000d8d
Show file tree

Hide file tree

Showing 11 changed files with 601 additions and 75 deletions.
diff --git a/reportbuilder/templates/custom_report.mustache b/reportbuilder/templates/custom_report.mustache
@@ -24,19 +24,71 @@
         "id": 1,
         "source": "some\\class\\name",
         "table": "table",
+        "editmode": true,
+        "showeditbutton": true,
         "sidebarmenucards": [{
-            "name": "General",
-            "items": [{
-                "name": "Manually added users",
-                "identifier": "core_reportbuilder:users"
+            "menucards": [{
+                "name": "General",
+                "items": [{
+                    "name": "Manually added users",
+                    "identifier": "core_reportbuilder:users"
+                }]
+            }]
+        }],
+        "conditions": [{
+            "hasavailableconditions": true,
+            "availableconditions": [{
+                "optiongroup": [{
+                    "text": "User",
+                    "values": [{
+                        "value": 1,
+                        "visiblename": "User name"
+                    }]
+                }]
+            }],
+            "hasactiveconditions": true,
+            "activeconditionsform": "form"
+        }],
+        "filters": [{
+            "hasavailablefilters": true,
+            "availablefilters": [{
+                "optiongroup": [{
+                    "text": "User",
+                    "values": [{
+                        "value": 1,
+                        "visiblename": "User name"
+                    }]
+                }]
+            }],
+            "hasactivefilters": true,
+            "activefilters": [{
+                "heading": "Email address",
+                "entityname": "user",
+                "headingeditable": "Email address"
+            }]
+        }],
+        "sorting": [{
+            "hassortablecolumns": true,
+            "sortablecolumns": [{
+                "id": 1,
+                "title": "Email address",
+                "sortdirection": "4",
+                "sortenabled": true,
+                "sortorder": 1,
+                "sorticon": [{
+                    "key": "t/uplong",
+                    "component": "core",
+                    "title": "Sort column 'Email address' ascending"
+                }],
+                "heading": "Email address"
             }]
         }]
     }
 }}
 <div data-region="core_reportbuilder/report"
      data-report-id="{{id}}"
      data-source="{{source}}"
-     id="core-reportbuilder-{{uniqid}}">
+     data-parameter="[]">
     <div class="reportbuilder-wrapper d-flex flex-column flex-md-row">
         {{#editmode}}
             <!-- Sidebar -->
@@ -48,7 +100,7 @@
                 <div data-region="core_reportbuilder/report-header" class="dropdown d-flex justify-content-end">
                     <!-- Preview/Edit button -->
                     {{#showeditbutton}}
-                        <button data-action="toggle-edit-preview" data-edit-mode="{{editmode}}" class="btn btn-secondary mr-2"
+                        <button data-action="toggle-edit-preview" data-edit-mode="{{editmode}}" class="btn btn-outline-secondary mr-2"
                                 title="{{#editmode}}{{#str}} switchpreview, core_reportbuilder {{/str}}{{/editmode}}{{^editmode}}{{#str}} switchedit, core_reportbuilder {{/str}}{{/editmode}}">
                             {{#editmode}}
                                 {{#pix}} i/preview, core,  {{/pix}}
@@ -62,7 +114,7 @@
                     {{/showeditbutton}}
                     <!-- Settings/Filters button -->
                     {{#editmode}}
-                        <button id="report-settings-collapse" data-toggle="collapse" data-target="#report-settings" class="btn btn-secondary"
+                        <button id="report-settings-collapse" data-toggle="collapse" data-target="#report-settings" class="btn btn-outline-secondary collapsed"
                                 title="{{#str}} reportsettingstoggle, core_reportbuilder {{/str}}">
                             <i class="icon fa fa-sliders" aria-hidden="true"></i>
                             {{#str}} settings, moodle {{/str}}
@@ -82,7 +134,8 @@
             </div>
         </div>
         <!-- Settings sidebar -->
-        {{> core_reportbuilder/local/settings/area}}    </div>
+        {{> core_reportbuilder/local/settings/area}}
+    </div>
 </div>
 
 {{#js}}

diff --git a/reportbuilder/templates/local/conditions/header.mustache b/reportbuilder/templates/local/conditions/header.mustache
@@ -21,7 +21,9 @@
 
     Example context (json):
     {
-        "name": "Date modified"
+        "id": 1,
+        "heading": "Date modified",
+        "entityname": "Course"
     }
 }}
 <div class="condition list-group-item list-group-item-action text-dark" data-region="active-condition"

diff --git a/reportbuilder/templates/local/filters/area.mustache b/reportbuilder/templates/local/filters/area.mustache
@@ -15,7 +15,7 @@
     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
 }}
 {{!
-    @template core_reportbuilder/filters/area
+    @template core_reportbuilder/local/filters/area
 
     Template for system report filters area
 
@@ -24,29 +24,28 @@
         "id": 3,
         "contextid": 1,
         "filtersapplied": 3,
+        "showeditbutton": false,
         "filtersform": "form"
     }
 }}
 
-<div class="dropdown d-flex justify-content-end mb-2">
-    <!-- Filters button -->
-    <button class="btn btn-sm btn-secondary" type="button" id="dropdownFiltersButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="{{#str}} filters, moodle {{/str}}">
-        {{#pix}} i/filter, core {{/pix}}
-        <span data-region="filter-button-label">
-            {{#filtersapplied}} {{#str}} filtersappliedx, core_reportbuilder, {{filtersapplied}} {{/str}} {{/filtersapplied}}
-            {{^filtersapplied}} {{#str}} filters, moodle {{/str}} {{/filtersapplied}}
-        </span>
-    </button>
-    <!-- Filters content -->
-    <div class="filters-dropdown dropdown-menu dropdown-menu-right" aria-labelledby="dropdownFiltersButton">
-        <div id="filters" class="reportbuilder-filters-sidebar" data-region="report-filters">
-            <div class="p-3">
-                {{#filtersform}}
-                    <div class="reportbuilder-filters-wrapper" data-region="filters-form">
-                        {{{filtersform}}}
-                    </div>
-                {{/filtersform}}
-            </div>
+<!-- Filters button -->
+<button class="btn btn-outline-secondary {{^showeditbutton}}btn-sm{{/showeditbutton}}" type="button" id="dropdownFiltersButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="{{#str}} filters, moodle {{/str}}">
+    {{#pix}} i/filter, core {{/pix}}
+    <span data-region="filter-button-label">
+        {{#filtersapplied}} {{#str}} filtersappliedx, core_reportbuilder, {{filtersapplied}} {{/str}} {{/filtersapplied}}
+        {{^filtersapplied}} {{#str}} filters, moodle {{/str}} {{/filtersapplied}}
+    </span>
+</button>
+<!-- Filters content -->
+<div class="filters-dropdown dropdown-menu dropdown-menu-right" aria-labelledby="dropdownFiltersButton">
+    <div id="filters" class="reportbuilder-filters-sidebar" data-region="report-filters">
+        <div class="p-3">
+            {{#filtersform}}
+                <div class="reportbuilder-filters-wrapper" data-region="filters-form">
+                    {{{filtersform}}}
+                </div>
+            {{/filtersform}}
         </div>
     </div>
 </div>

diff --git a/reportbuilder/templates/local/settings/conditions.mustache b/reportbuilder/templates/local/settings/conditions.mustache
@@ -21,8 +21,20 @@
 
     Example context (json):
     {
-        "id": 3,
-        "filtersform": "form"
+        "conditions": [{
+            "hasavailableconditions": true,
+            "availableconditions": [{
+                "optiongroup": [{
+                    "text": "User",
+                    "values": [{
+                        "value": 1,
+                        "visiblename": "User name"
+                    }]
+                }]
+            }],
+            "hasactiveconditions": true,
+            "activeconditionsform": "form"
+        }]
     }
 }}
 

diff --git a/reportbuilder/templates/local/settings/filters.mustache b/reportbuilder/templates/local/settings/filters.mustache
@@ -21,8 +21,24 @@
 
     Example context (json):
     {
-        "id": 3,
-        "filtersform": "form"
+        "filters": [{
+            "hasavailablefilters": true,
+            "availablefilters": [{
+                "optiongroup": [{
+                    "text": "User",
+                    "values": [{
+                        "value": 1,
+                        "visiblename": "User name"
+                    }]
+                }]
+            }],
+            "hasactivefilters": true,
+            "activefilters": [{
+                "heading": "Email address",
+                "entityname": "user",
+                "headingeditable": "Email address"
+            }]
+        }]
     }
 }}
 

diff --git a/reportbuilder/templates/local/sidebar-menu/area.mustache b/reportbuilder/templates/local/sidebar-menu/area.mustache
@@ -22,26 +22,32 @@
     Example context (json):
     {
         "sidebarmenucards": [{
-            "name": "General",
-            "items": [{
-                "name": "Manually added users",
-                "identifier": "core_reportbuilder:users"
+            "menucards": [{
+                "name": "General",
+                "items": [{
+                    "name": "Manually added users",
+                    "identifier": "core_reportbuilder:users"
+                }]
             }]
         }]
     }
 }}
 <div class="reportbuilder-sidebar-menu d-flex flex-column mr-md-3" data-region="sidebar-menu" id="region-sidebar-menu">
     <div class="input-group mb-3">
-        <div class="input-group-prepend">
-            <span class="input-group-text pr-0 bg-white">
-                {{#pix}} a/search, core {{/pix}}
-            </span>
-        </div>
-        <input type="text"
-               class="form-control border-left-0"
+        <label for="reportbuilder-sidebar-search">
+            <span class="sr-only">{{#str}} search, core_search {{/str}}</span>
+        </label>
+        <input id="reportbuilder-sidebar-search"
+               type="text"
+               class="form-control  border-right-0"
                placeholder="{{#str}} search, core_search {{/str}}"
                aria-label="{{#str}} search, core_search {{/str}}"
                data-action="sidebar-search">
+        <div class="input-group-append">
+            <span class="input-group-text pl-2 pr-0 bg-white">
+                {{#pix}} a/search, core {{/pix}}
+            </span>
+        </div>
     </div>
     <div class="reportbuilder-sidebar-menu-cards">
         {{#sidebarmenucards}}

diff --git a/reportbuilder/templates/system_report.mustache b/reportbuilder/templates/system_report.mustache
@@ -29,16 +29,20 @@
         "filtersform": "form"
     }
 }}
-<div data-region="core_reportbuilder/system-report"
-        data-reportid="{{id}}"
+<div data-region="core_reportbuilder/report"
+        data-report-id="{{id}}"
         data-source="{{source}}"
         data-parameter="{{parameters}}">
-            <div class="reportbuilder-table-wrapper">
+            <div class="reportbuilder-wrapper">
                 {{#filterspresent}}
-                    {{>core_reportbuilder/local/filters/area}}
+                    <div class="dropdown d-flex justify-content-end">
+                        {{>core_reportbuilder/local/filters/area}}
+                    </div>
                 {{/filterspresent}}
                 <!-- Table -->
-                {{{table}}}
+                <div class="mt-2">
+                    {{{table}}}
+                </div>
             </div>
 </div>
 

diff --git a/reportbuilder/templates/table_header_cell.mustache b/reportbuilder/templates/table_header_cell.mustache
@@ -32,7 +32,7 @@
         {{>core/drag_handle}}
     </div>
     <div class="w-100">
-        <div class="d-flex justify-content-between">
+        <div class="d-flex justify-content-between mb-2">
             <small class="text-muted text-nowrap text-uppercase">{{entityname}} &bull; {{name}}</small>
             <span class="text-nowrap">
                 <a data-action="report-remove-column" class="nomargin" href="#">