mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-01-17 21:49:15 +01:00
Code Issues Projects Releases Wiki Activity

MDL-72770 reportbuilder: Display editor in full screen layout

Browse Source 
- use 'popup' layout in editor page and create a custom navbar
- remove 'Settings' toggle button and show settings right sidebar with fixed position
- add 'Edit details' button on navbar that opens a modal to modify report basic settings
This commit is contained in:
Mikel Martín 2021-10-19 19:32:29 +02:00
parent 7fa38ba262
commit 6a6ebbac63
22 changed files with 346 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
cohort/tests/behat/reportbuilder.feature
View File

@ -43,8 +43,7 @@ Feature: Manage custom reports for cohorts
Scenario: Add condition to cohorts report
Given I am on the "My report" "reportbuilder > Editor" page logged in as "admin"
And I change window size to "large"
When I click on "Show/hide settings sidebar" "button"
And I click on "Show/hide 'Conditions'" "button"
When I click on "Show/hide 'Conditions'" "button"
Then I should see "There are no conditions selected" in the "[data-region='settings-conditions']" "css_element"
And I set the field "Select a condition" to "Category"
And I should see "Added condition 'Category'"
@ -60,8 +59,7 @@ Feature: Manage custom reports for cohorts
Scenario: Use filters in cohorts report
Given I am on the "My report" "reportbuilder > Editor" page logged in as "admin"
And I change window size to "large"
When I click on "Show/hide settings sidebar" "button"
And I click on "Show/hide 'Filters'" "button"
When I click on "Show/hide 'Filters'" "button"
Then I should see "There are no filters selected" in the "[data-region='settings-filters']" "css_element"
And I set the field "Select a filter" to "Name"
And I should see "Other cohort" in the ".reportbuilder-table" "css_element"
@ -87,7 +85,6 @@ Feature: Manage custom reports for cohorts
And I am on the "My report" "reportbuilder > Editor" page logged in as "admin"
And I set the field "Rename column 'Surname'" to "Member count"
And I set the "Surname" column aggregation to "Count"
And I click on "Show/hide settings sidebar" "button"
And I click on "Show/hide 'Sorting'" "button"
And I click on "Move sorting for column 'Surname'" "button"
And I click on "To the top of the list" "link" in the "Move sorting for column 'Surname'" "dialogue"

3
lang/en/reportbuilder.php
View File

@ -53,6 +53,8 @@ $string['cardview_help'] = 'Card view allows you to define the layout of your re
$string['cardviewfirstcolumntitle'] = 'First column title';
$string['cardviewsettingssaved'] = 'Card view settings saved';
$string['cardviewvisiblecolumns'] = 'Columns visible';
$string['close'] = 'Close';
$string['closeeditor'] = 'Close \'{$a}\' editor';
$string['columnadded'] = 'Added column \'{$a}\'';
$string['columnaggregated'] = 'Aggregated column \'{$a}\'';
$string['columndeleted'] = 'Deleted column \'{$a}\'';
@ -171,7 +173,6 @@ $string['renamefilter'] = 'Rename filter \'{$a}\'';
$string['reportbuilder'] = 'Report builder';
$string['reportcreated'] = 'Report created';
$string['reportdeleted'] = 'Report deleted';
$string['reportsettingstoggle'] = 'Show/hide settings sidebar';
$string['reportsource'] = 'Report source';
$string['reportsource_help'] = 'The report source defines where the data for the report will come from.';
$string['reportupdated'] = 'Report updated';

2
reportbuilder/amd/build/editor.min.js vendored
View File

@ -1,2 +1,2 @@
function _typeof(a){"@babel/helpers - typeof";if("function"==typeof Symbol&&"symbol"==typeof Symbol.iterator){_typeof=function(a){return typeof a}}else{_typeof=function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a}}return _typeof(a)}define ("core_reportbuilder/editor",["exports","core/inplace_editable","core/notification","core/pending","core/templates","core_reportbuilder/local/selectors","core_reportbuilder/local/editor/columns","core_reportbuilder/local/editor/conditions","core_reportbuilder/local/editor/filters","core_reportbuilder/local/editor/sorting","core_reportbuilder/local/editor/card_view","core_reportbuilder/local/repository/reports"],function(a,b,c,d,e,f,g,h,i,j,k,l){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.init=void 0;c=o(c);d=o(d);e=o(e);f=n(f);function m(){if("function"!=typeof WeakMap)return null;var a=new WeakMap;m=function(){return a};return a}function n(a){if(a&&a.__esModule){return a}if(null===a||"object"!==_typeof(a)&&"function"!=typeof a){return{default:a}}var b=m();if(b&&b.has(a)){return b.get(a)}var c={},d=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var e in a){if(Object.prototype.hasOwnProperty.call(a,e)){var f=d?Object.getOwnPropertyDescriptor(a,e):null;if(f&&(f.get||f.set)){Object.defineProperty(c,e,f)}else{c[e]=a[e]}}}c.default=a;if(b){b.set(a,c)}return c}function o(a){return a&&a.__esModule?a:{default:a}}var p=!1,q=function(){(0,g.init)(p);(0,h.init)(p);(0,i.init)(p);(0,j.init)(p);(0,k.init)(p);if(p){return}document.addEventListener("click",function(a){var b=a.target.closest(f.actions.toggleEditPreview);if(b){a.preventDefault();var g=a.target.closest(f.regions.report),h=new d.default("core_reportbuilder/reports:get"),i="1"!==b.dataset.editMode,j="";(0,l.getReport)(g.dataset.reportId,i).then(function(a){j=a.javascript;return e.default.render("core_reportbuilder/local/dynamictabs/editor",a)}).then(function(a,b){return e.default.replaceNode(g,a,b+j)}).then(function(){return h.resolve()}).catch(c.default.exception)}});p=!0};a.init=q});
function _typeof(a){"@babel/helpers - typeof";if("function"==typeof Symbol&&"symbol"==typeof Symbol.iterator){_typeof=function(a){return typeof a}}else{_typeof=function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a}}return _typeof(a)}define ("core_reportbuilder/editor",["exports","core/inplace_editable","core/notification","core/pending","core/templates","core/str","core/toast","core_reportbuilder/local/selectors","core_reportbuilder/local/editor/columns","core_reportbuilder/local/editor/conditions","core_reportbuilder/local/editor/filters","core_reportbuilder/local/editor/sorting","core_reportbuilder/local/editor/card_view","core_reportbuilder/local/repository/reports","core_reportbuilder/local/repository/modals"],function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.init=void 0;c=r(c);d=r(d);e=r(e);h=q(h);function p(){if("function"!=typeof WeakMap)return null;var a=new WeakMap;p=function(){return a};return a}function q(a){if(a&&a.__esModule){return a}if(null===a||"object"!==_typeof(a)&&"function"!=typeof a){return{default:a}}var b=p();if(b&&b.has(a)){return b.get(a)}var c={},d=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var e in a){if(Object.prototype.hasOwnProperty.call(a,e)){var f=d?Object.getOwnPropertyDescriptor(a,e):null;if(f&&(f.get||f.set)){Object.defineProperty(c,e,f)}else{c[e]=a[e]}}}c.default=a;if(b){b.set(a,c)}return c}function r(a){return a&&a.__esModule?a:{default:a}}var s=!1,t=function(){(0,i.init)(s);(0,j.init)(s);(0,k.init)(s);(0,l.init)(s);(0,m.init)(s);if(s){return}document.addEventListener("click",function(a){var b=a.target.closest(h.actions.toggleEditPreview);if(b){a.preventDefault();var i=a.target.closest(h.regions.report),j=new d.default("core_reportbuilder/reports:get"),k="1"!==b.dataset.editMode,l="";(0,n.getReport)(i.dataset.reportId,k).then(function(a){l=a.javascript;return e.default.render("core_reportbuilder/local/dynamictabs/editor",a)}).then(function(a,b){return e.default.replaceNode(i,a,b+l)}).then(function(){return j.resolve()}).catch(c.default.exception)}var m=a.target.closest(h.actions.reportEdit);if(m){a.preventDefault();var p=(0,o.createReportModal)(a.target,(0,f.get_string)("editreportdetails","core_reportbuilder"),m.dataset.reportId);p.addEventListener(p.events.FORM_SUBMITTED,function(){(0,f.get_string)("reportupdated","core_reportbuilder").then(g.add).then(function(){return window.location.reload()}).catch(c.default.exception)});p.show()}});s=!0};a.init=t});
//# sourceMappingURL=editor.min.js.map

2
reportbuilder/amd/build/editor.min.js.map
View File

File diff suppressed because one or more lines are too long

21
reportbuilder/amd/src/editor.js
View File

@ -27,6 +27,8 @@ import 'core/inplace_editable';
import Notification from 'core/notification';
import Pending from 'core/pending';
import Templates from 'core/templates';
import {get_string as getString} from 'core/str';
import {add as addToast} from 'core/toast';
import * as reportSelectors from 'core_reportbuilder/local/selectors';
import {init as columnsEditorInit} from 'core_reportbuilder/local/editor/columns';
import {init as conditionsEditorInit} from 'core_reportbuilder/local/editor/conditions';
@ -34,6 +36,7 @@ import {init as filtersEditorInit} from 'core_reportbuilder/local/editor/filters
import {init as sortingEditorInit} from 'core_reportbuilder/local/editor/sorting';
import {init as cardviewEditorInit} from 'core_reportbuilder/local/editor/card_view';
import {getReport} from 'core_reportbuilder/local/repository/reports';
import {createReportModal} from 'core_reportbuilder/local/repository/modals';
let initialized = false;
@ -77,6 +80,24 @@ export const init = () => {
.then(() => pendingPromise.resolve())
.catch(Notification.exception);
}
// Edit report details modal.
const reportEdit = event.target.closest(reportSelectors.actions.reportEdit);
if (reportEdit) {
event.preventDefault();
const reportModal = createReportModal(event.target, getString('editreportdetails', 'core_reportbuilder'),
reportEdit.dataset.reportId);
reportModal.addEventListener(reportModal.events.FORM_SUBMITTED, () => {
getString('reportupdated', 'core_reportbuilder')
.then(addToast)
.then(() => {
return window.location.reload();
})
.catch(Notification.exception);
});
reportModal.show();
}
});
initialized = true;

28
reportbuilder/classes/output/renderer.php
View File

@ -19,10 +19,12 @@ declare(strict_types=1);
namespace core_reportbuilder\output;
use html_writer;
use moodle_url;
use plugin_renderer_base;
use core_reportbuilder\table\custom_report_table;
use core_reportbuilder\table\custom_report_table_view;
use core_reportbuilder\table\system_report_table;
use core_reportbuilder\local\models\report;
/**
* Report renderer class
@ -113,4 +115,30 @@ class renderer extends plugin_renderer_base {
'data-action' => 'report-create',
]);
}
/**
* Renders full page editor header
*
* @param report $report
* @return string
*/
public function render_fullpage_editor_header(report $report): string {
$reportname = $report->get_formatted_name();
$editdetailsbutton = html_writer::tag('button', get_string('editdetails', 'core_reportbuilder'), [
'class' => 'btn btn-outline-secondary mr-2',
'data-action' => 'report-edit',
'data-report-id' => $report->get('id')
]);
$closebutton = html_writer::link(new moodle_url('/reportbuilder/index.php'), get_string('close', 'core_reportbuilder'), [
'class' => 'btn btn-secondary',
'title' => get_string('closeeditor', 'core_reportbuilder', $reportname),
'role' => 'button'
]);
$context = [
'title' => $reportname,
'buttons' => $editdetailsbutton . $closebutton,
];
return $this->render_from_template('core_reportbuilder/editor_navbar', $context);
}
}

7
reportbuilder/edit.php
View File

@ -44,13 +44,18 @@ permission::require_can_edit_report($report->get_report_persistent());
$PAGE->set_context($report->get_context());
$PAGE->navbar->add(get_string('editreportcontent', 'core_reportbuilder'), $PAGE->url);
$PAGE->set_pagelayout('popup');
/** @var \core_reportbuilder\output\renderer $renderer */
$renderer = $PAGE->get_renderer('core_reportbuilder');
$reportname = $report->get_report_persistent()->get_formatted_name();
$PAGE->set_title($reportname);
$PAGE->set_heading($reportname);
echo $OUTPUT->header();
echo $renderer->render_fullpage_editor_header($report->get_report_persistent());
// Add dynamic tabs.
$tabdata = ['reportid' => $reportid];
$tabs = [

33
reportbuilder/templates/editor_navbar.mustache Normal file
View File

@ -0,0 +1,33 @@
{{!
This file is part of Moodle - http://moodle.org/
Moodle is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Moodle is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
}}
{{!
@template core_reportbuilder/editor_navbar
This template renders the reportbuilder editor navbar
Example context (json):
{
"title": "Report title",
"buttons": "<button class='btn btn-secondary mr-2'>Close</button>"
}
}}
<nav class="navbar fixed-top navbar-light bg-white navbar-expand align-items-center" aria-label="{{#str}}sitemenubar, admin{{/str}}">
<h1 class="h3 m-0 p-0">{{title}}</h1>
<div class="ml-auto d-flex">
{{{buttons}}}
</div>
</nav>

2
reportbuilder/templates/local/dynamictabs/audience.mustache
View File

@ -46,7 +46,7 @@
}
}}
<h2 class="sr-only">{{#str}} audience, core_reportbuilder {{/str}}</h2>
<div class="audiences-wrapper d-flex flex-column flex-md-row">
<div class="audiences-wrapper d-flex flex-column flex-lg-row">
<div id="audiences-menu">
{{! Sidebar }}
{{> core_reportbuilder/local/sidebar-menu/area}}

14
reportbuilder/templates/local/dynamictabs/editor.mustache
View File

@ -94,7 +94,7 @@
data-report-type="{{type}}"
data-parameter="[]"
{{#editmode}}data-editing{{/editmode}}>
<div class="reportbuilder-wrapper d-flex flex-column flex-md-row">
<div class="reportbuilder-wrapper d-flex flex-column flex-lg-row">
{{#editmode}}
{{! Menu sidebar }}
{{> core_reportbuilder/local/sidebar-menu/area}}
@ -104,7 +104,7 @@
<div class="{{#editmode}}p-2 border{{/editmode}}">
<div data-region="core_reportbuilder/report-header" class="dropdown d-flex justify-content-end">
{{! Preview/Edit button }}
<button data-action="toggle-edit-preview" data-edit-mode="{{editmode}}" class="btn btn-outline-secondary mr-2"
<button data-action="toggle-edit-preview" data-edit-mode="{{editmode}}" class="btn btn-outline-secondary"
title="{{#editmode}}{{#str}} switchpreview, core_reportbuilder {{/str}}{{/editmode}}{{^editmode}}{{#str}} switchedit, core_reportbuilder {{/str}}{{/editmode}}">
{{#editmode}}
{{#pix}} i/preview, core {{/pix}}
@ -115,14 +115,6 @@
{{#str}} edit, core {{/str}}
{{/editmode}}
</button>
{{! Settings/Filters button }}
{{#editmode}}
<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}}
</button>
{{/editmode}}
{{^editmode}}
{{! Filters }}
{{#filterspresent}}
@ -140,7 +132,7 @@
{{! Settings sidebar }}
{{> core_reportbuilder/local/settings/area}}
{{/editmode}}
</div>
</div>
</div>
{{#js}}

2
reportbuilder/templates/local/filters/area.mustache
View File

@ -29,7 +29,7 @@
}}
{{! Filters button }}
<button class="btn btn-outline-secondary" type="button" id="dropdownFiltersButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="{{#str}} filters, moodle {{/str}}">
<button class="btn btn-outline-secondary ml-2" 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}}

6
reportbuilder/templates/local/settings/area.mustache
View File

@ -75,9 +75,7 @@
}
}}
<div class="reportbuilder-sidebar-settings sidebar collapse" id="report-settings" style="min-width: 350px;">
<div class="dropdown d-flex justify-content-end mb-2">
<div class="mb-3 mt-2 mt-md-0 ml-md-3 w-100">
<div class="reportbuilder-sidebar-settings d-flex flex-column mt-3 mt-lg-0 mb-3 mb-lg-0 ml-lg-3">
{{< core_reportbuilder/toggle_card }}
{{$collapsed}}collapsed{{/collapsed}}
@ -119,6 +117,4 @@
{{/body}}
{{/ core_reportbuilder/toggle_card }}
</div>
</div>
</div>

2
reportbuilder/templates/local/sidebar-menu/area.mustache
View File

@ -32,7 +32,7 @@
}]
}
}}
<div id="region-sidebar-menu-{{uniqid}}" class="reportbuilder-sidebar-menu d-flex flex-column mr-md-3" data-region="sidebar-menu">
<div id="region-sidebar-menu-{{uniqid}}" class="reportbuilder-sidebar-menu d-flex flex-column mr-lg-3 mb-3 mb-lg-0" data-region="sidebar-menu">
<div class="input-group mb-3">
<label for="reportbuilder-sidebar-search">
<span class="sr-only">{{#str}} search, core_search {{/str}}</span>

2
reportbuilder/tests/behat/audience.feature
View File

@ -185,7 +185,7 @@ Feature: Configure access to reports based on intended audience
| Report source | Users |
| Include default setup | 1 |
And I click on "Save" "button" in the "New report" "dialogue"
And I navigate to "Reports > Report builder > Custom reports" in site administration
And I click on "Close 'My user1 report' editor" "button"
And I should see "My user1 report"
And I log out
And I log in as "admin"

3
reportbuilder/tests/behat/cardview.feature
View File

@ -20,7 +20,6 @@ Feature: Manage card view settings in the report editor
Scenario: Edit card view settings form
When I am on the "My report" "reportbuilder > Editor" page logged in as "admin"
Then I change window size to "large"
And I click on "Show/hide settings sidebar" "button"
And I click on "Show/hide 'Card view'" "button"
# Check default values.
And the following fields match these values:
@ -34,7 +33,6 @@ Feature: Manage card view settings in the report editor
# Let's check that after switching to preview mode card view form gets rendered again.
And I click on "Switch to preview mode" "button"
And I click on "Switch to edit mode" "button"
And I click on "Show/hide settings sidebar" "button"
And I click on "Show/hide 'Card view'" "button"
And the following fields match these values:
| Columns visible | 3 |
@ -63,7 +61,6 @@ Feature: Manage card view settings in the report editor
# Change 'Columns visible' to 3 and 'First column title' to yes.
And I change window size to "large"
And I press "Switch to edit mode"
And I click on "Show/hide settings sidebar" "button"
And I click on "Show/hide 'Card view'" "button"
And I set the following fields to these values:
| Columns visible | 3 |

15
reportbuilder/tests/behat/columnsortingeditor.feature
View File

@ -20,8 +20,7 @@ Feature: Manage custom report columns sorting
And I am on the "My report" "reportbuilder > Editor" page logged in as "admin"
Scenario: Toggle column sorting in report
Given I click on "Show/hide settings sidebar" "button"
And I change window size to "large"
Given I change window size to "large"
And I click on "Show/hide 'Sorting'" "button"
# This will be the fallback sort after toggling lastname sorting.
And I click on "Enable sorting for column 'First name'" "checkbox"
@ -33,8 +32,7 @@ Feature: Manage custom report columns sorting
And "user01" "table_row" should appear before "user02" "table_row"
Scenario: Change column sort direction in report
Given I click on "Show/hide settings sidebar" "button"
And I change window size to "large"
Given I change window size to "large"
And I click on "Show/hide 'Sorting'" "button"
When I click on "Enable sorting for column 'Surname'" "checkbox"
And I click on "Sort column 'Surname' descending" "button"
@ -45,8 +43,7 @@ Feature: Manage custom report columns sorting
And "user02" "table_row" should appear before "user01" "table_row"
Scenario: Change column sort order in report
Given I click on "Show/hide settings sidebar" "button"
And I change window size to "large"
Given I change window size to "large"
And I click on "Show/hide 'Sorting'" "button"
When I click on "Enable sorting for column 'Surname'" "checkbox"
And I click on "Enable sorting for column 'First name'" "checkbox"
@ -57,15 +54,13 @@ Feature: Manage custom report columns sorting
And "user01" "table_row" should appear before "user02" "table_row"
Scenario: Sortable columns are updated when column is added to report
Given I click on "Show/hide settings sidebar" "button"
And I change window size to "large"
Given I change window size to "large"
And I click on "Show/hide 'Sorting'" "button"
When I click on "Add column 'Full name'" "link"
Then I should see "Full name" in the "#settingssorting" "css_element"
Scenario: Sortable columns are updated when column is deleted from report
Given I click on "Show/hide settings sidebar" "button"
And I change window size to "large"
Given I change window size to "large"
And I click on "Show/hide 'Sorting'" "button"
When I click on "Delete column 'Username'" "button"
And I click on "Delete" "button" in the "Delete column 'Username'" "dialogue"

12
reportbuilder/tests/behat/conditioneditor.feature
View File

@ -20,8 +20,7 @@ Feature: Manage custom report conditions
Scenario: Add condition to report
Given I am on the "My report" "reportbuilder > Editor" page logged in as "admin"
And I change window size to "large"
When I click on "Show/hide settings sidebar" "button"
And I click on "Show/hide 'Conditions'" "button"
When I click on "Show/hide 'Conditions'" "button"
Then I should see "There are no conditions selected" in the "[data-region='settings-conditions']" "css_element"
And I set the field "Select a condition" to "Email address"
And I should see "Added condition 'Email address'"
@ -41,8 +40,7 @@ Feature: Manage custom report conditions
| My report | user:email |
| My report | user:country |
And I am on the "My report" "reportbuilder > Editor" page logged in as "admin"
When I click on "Show/hide settings sidebar" "button"
And I click on "Show/hide 'Conditions'" "button"
When I click on "Show/hide 'Conditions'" "button"
And I click on "Move condition 'Country'" "button"
And I click on "After \"Full name\"" "link" in the "Move condition 'Country'" "dialogue"
Then I should see "Moved condition 'Country'"
@ -54,8 +52,7 @@ Feature: Manage custom report conditions
| My report | user:email |
And I am on the "My report" "reportbuilder > Editor" page logged in as "admin"
And I change window size to "large"
When I click on "Show/hide settings sidebar" "button"
And I click on "Show/hide 'Conditions'" "button"
When I click on "Show/hide 'Conditions'" "button"
And I set the following fields in the "Email address" "core_reportbuilder > Condition" to these values:
| Email address operator | Does not contain |
| Email address value | user02 |
@ -74,8 +71,7 @@ Feature: Manage custom report conditions
| My report | user:email |
And I am on the "My report" "reportbuilder > Editor" page logged in as "admin"
And I change window size to "large"
When I click on "Show/hide settings sidebar" "button"
And I click on "Show/hide 'Conditions'" "button"
When I click on "Show/hide 'Conditions'" "button"
And I set the following fields in the "Email address" "core_reportbuilder > Condition" to these values:
| Email address operator | Does not contain |
| Email address value | example.com |

16
reportbuilder/tests/behat/customreports.feature
View File

@ -20,7 +20,6 @@ Feature: Manage custom reports
And I should see "Username" in the "reportbuilder-table" "table"
And I should see "Email address" in the "reportbuilder-table" "table"
# Confirm we see the default conditions in the report.
And I click on "Show/hide settings sidebar" "button"
And I click on "Show/hide 'Conditions'" "button"
Then I should see "Full name" in the "[data-region='settings-conditions']" "css_element"
Then I should see "Username" in the "[data-region='settings-conditions']" "css_element"
@ -31,7 +30,7 @@ Feature: Manage custom reports
Then I should see "Full name" in the "[data-region='report-filters']" "css_element"
Then I should see "Username" in the "[data-region='report-filters']" "css_element"
Then I should see "Email address" in the "[data-region='report-filters']" "css_element"
And I navigate to "Reports > Report builder > Custom reports" in site administration
And I click on "Close 'My report' editor" "button"
And the following should exist in the "reportbuilder-table" table:
| Name | Report source | Modified by |
| My report | Users | Admin User |
@ -51,7 +50,7 @@ Feature: Manage custom reports
And I click on "Save" "button" in the "New report" "dialogue"
Then I should see "My report"
And I should see "Nothing to display"
And I navigate to "Reports > Report builder > Custom reports" in site administration
And I click on "Close 'My report' editor" "button"
And the following should exist in the "reportbuilder-table" table:
| Name | Report source |
| My report | Users |
@ -121,13 +120,11 @@ Feature: Manage custom reports
And I am on the "My report" "reportbuilder > Editor" page logged in as "admin"
Then I should see "Preview" in the "[data-region='core_reportbuilder/report-header']" "css_element"
And I should not see "Edit" in the "[data-region='core_reportbuilder/report-header']" "css_element"
And I should see "Settings" in the "[data-region='core_reportbuilder/report-header']" "css_element"
And I should not see "Filters" in the "[data-region='core_reportbuilder/report-header']" "css_element"
And I should see "Full name" in the ".reportbuilder-sidebar-menu" "css_element"
Then I click on "Switch to preview mode" "button"
Then I should not see "Preview" in the "[data-region='core_reportbuilder/report-header']" "css_element"
And I should see "Edit" in the "[data-region='core_reportbuilder/report-header']" "css_element"
And I should not see "Settings" in the "[data-region='core_reportbuilder/report-header']" "css_element"
And I should see "Filters" in the "[data-region='core_reportbuilder/report-header']" "css_element"
Then I click on "Switch to edit mode" "button"
Then I should see "Preview" in the "[data-region='core_reportbuilder/report-header']" "css_element"
@ -142,9 +139,8 @@ Feature: Manage custom reports
And I click on "<link>" "link" in the "My report" "table_row"
Then <previewvisible> "Preview" in the "[data-region='core_reportbuilder/report']" "css_element"
And <editvisible> "Edit" in the "[data-region='core_reportbuilder/report']" "css_element"
And <settingsvisible> "Settings" in the "[data-region='core_reportbuilder/report']" "css_element"
And <filtersvisible> "Filters" in the "[data-region='core_reportbuilder/report']" "css_element"
And "button[title='Filters']" "css_element" <filtersvisible> in the "[data-region='core_reportbuilder/report']" "css_element"
Examples:
| link | previewvisible | editvisible | settingsvisible | filtersvisible |
| My report | I should see | I should not see | I should see | I should not see |
| View | I should not see | I should not see | I should not see | I should see |
| link | previewvisible | editvisible | filtersvisible |
| My report | I should see | I should not see | should not exist |
| View | I should not see | I should not see | should exist |

14
reportbuilder/tests/behat/filtereditor.feature
View File

@ -9,8 +9,7 @@ Feature: Manage custom report filters
| name | source | default |
| My report | core_user\reportbuilder\datasource\users | 0 |
And I am on the "My report" "reportbuilder > Editor" page logged in as "admin"
When I click on "Show/hide settings sidebar" "button"
And I click on "Show/hide 'Filters'" "button"
When I click on "Show/hide 'Filters'" "button"
Then I should see "There are no filters selected" in the "[data-region='active-filters']" "css_element"
And I set the field "Select a filter" to "Email address"
And I should see "Added filter 'Email address'"
@ -25,11 +24,9 @@ Feature: Manage custom report filters
| report | uniqueidentifier |
| My report | user:email |
And I am on the "My report" "reportbuilder > Editor" page logged in as "admin"
And I click on "Show/hide settings sidebar" "button"
And I click on "Show/hide 'Filters'" "button"
When I set the field "Rename filter 'Email address'" to "My Email filter"
And I reload the page
And I click on "Show/hide settings sidebar" "button"
And I click on "Show/hide 'Filters'" "button"
Then I should see "My Email filter" in the "[data-region='active-filters']" "css_element"
@ -43,11 +40,9 @@ Feature: Manage custom report filters
| report | uniqueidentifier |
| My report | user:email |
And I am on the "My report" "reportbuilder > Editor" page logged in as "admin"
And I click on "Show/hide settings sidebar" "button"
And I click on "Show/hide 'Filters'" "button"
When I set the field "Rename filter 'Email address'" to "<span class=\"multilang\" lang=\"en\">English</span><span class=\"multilang\" lang=\"es\">Spanish</span>"
And I reload the page
And I click on "Show/hide settings sidebar" "button"
And I click on "Show/hide 'Filters'" "button"
Then I should see "English" in the "[data-region='active-filters']" "css_element"
And I should not see "Spanish" in the "[data-region='active-filters']" "css_element"
@ -62,8 +57,7 @@ Feature: Manage custom report filters
| My report | user:email |
| My report | user:country |
And I am on the "My report" "reportbuilder > Editor" page logged in as "admin"
When I click on "Show/hide settings sidebar" "button"
And I click on "Show/hide 'Filters'" "button"
When I click on "Show/hide 'Filters'" "button"
And I click on "Move filter 'Country'" "button"
And I click on "After \"Full name\"" "link" in the "Move filter 'Country'" "dialogue"
Then I should see "Moved filter 'Country'"
@ -77,7 +71,6 @@ Feature: Manage custom report filters
| report | uniqueidentifier |
| My report | user:email |
And I am on the "My report" "reportbuilder > Editor" page logged in as "admin"
When I click on "Show/hide settings sidebar" "button"
And I click on "Show/hide 'Filters'" "button"
And I click on "Delete filter 'Email address'" "button"
And I click on "Delete" "button" in the "Delete filter 'Email address'" "dialogue"
@ -147,8 +140,7 @@ Feature: Manage custom report filters
And I should see "user2@example.com" in the ".reportbuilder-table" "css_element"
And I should see "user3@example.com" in the ".reportbuilder-table" "css_element"
# Set a condition to the report.
When I click on "Show/hide settings sidebar" "button"
And I click on "Show/hide 'Conditions'" "button"
When I click on "Show/hide 'Conditions'" "button"
And I set the following fields in the "Email address" "core_reportbuilder > Condition" to these values:
| Email address operator | Is not equal to |
| Email address value | user3@example.com |

70
theme/boost/scss/moodle/reportbuilder.scss
View File

@ -1,5 +1,5 @@
/**
* Reportbuilder table.
* Reportbuilder.
*/
/* Table */
@ -85,6 +85,9 @@
* Custom Reports.
*/
$rb-left-sidebar-width: 250px;
$rb-right-sidebar-width: 350px;
.reportbuilder-report-container {
@extend .flex-fill;
min-width: 0;
@ -109,8 +112,8 @@
/* Sidebar menu */
.reportbuilder-sidebar-menu {
@include media-breakpoint-up(md) {
width: 250px;
@include media-breakpoint-up(lg) {
width: $rb-left-sidebar-width;
flex-shrink: 0;
}
.card-body .list-group-item {
@ -123,15 +126,16 @@
}
}
.reportbuilder-sidebar-menu-cards {
max-height: 60vh;
overflow-y: auto;
@include reportbuilder-scrollbar;
}
/* Customreport settings */
/* Settings sidebar */
.reportbuilder-sidebar-settings {
@include media-breakpoint-up(md) {
width: 350px;
overflow-y: auto;
@include reportbuilder-scrollbar;
@include media-breakpoint-up(lg) {
width: $rb-right-sidebar-width;
flex-shrink: 0;
}
.list-group-item {
@ -191,6 +195,57 @@
}
}
/* Reportbuilder full page styles. */
@include media-breakpoint-up(lg) {
$tabs-height: 83px;
$sidebar-margin-top: $navbar-height + $tabs-height + 20px;
.path-admin-reportbuilder.pagelayout-popup {
// Fix for behat-site defined in theme/boost/scss/moodle/debug.scss:7 is not needed. Override it.
&.behat-site .fixed-top {
position: fixed;
}
#region-main {
border: none;
padding: 0;
}
#maincontent {
visibility: hidden;
}
.dynamictabs .nav-tabs {
position: fixed;
z-index: $zindex-fixed;
width: calc(100% - 35px);
padding-top: 1.25rem;
background-color: $white;
box-shadow: 0 1.25rem 0 $white; // Small hack to simulate padding bottom after nav-tabs border.
}
.dynamictabs .tab-content {
padding-top: $tabs-height;
}
.reportbuilder-sidebar-menu {
position: fixed;
.reportbuilder-sidebar-menu-cards {
max-height: calc(100vh - #{$sidebar-margin-top} - 52px); // 52px corresponds to "search" input size.
}
}
.reportbuilder-sidebar-settings {
position: fixed;
right: 30px;
max-height: calc(100vh - #{$sidebar-margin-top});
}
.reportbuilder-report[data-editing] .reportbuilder-report-container {
max-height: calc(100vh - #{$sidebar-margin-top});
overflow-y: auto;
@include reportbuilder-scrollbar;
margin-left: calc(#{$rb-left-sidebar-width} + 1rem);
margin-right: calc(#{$rb-right-sidebar-width} + 1rem);
}
.reportbuilder-audiences-container {
margin-left: calc(#{$rb-left-sidebar-width} + 1rem);
}
}
}
/* Toggle cards. */
.reportbuilder-toggle-card {
.card-header {
@ -212,7 +267,6 @@
.expanded-icon-container {
display: inline-block;
}
&.collapsed {
.collapsed-icon-container {
display: inline-block;

115
theme/boost/style/moodle.css
View File

@ -20683,7 +20683,7 @@ div.editor_atto_toolbar button .icon {
margin-top: 60px; }
/**
* Reportbuilder table.
* Reportbuilder.
*/
/* Table */
/* Filters */
@ -20751,7 +20751,7 @@ div.editor_atto_toolbar button .icon {
margin-right: 0; }
/* Sidebar menu */
@media (min-width: 768px) {
@media (min-width: 992px) {
.reportbuilder-sidebar-menu {
width: 250px;
flex-shrink: 0; } }
@ -20764,7 +20764,6 @@ div.editor_atto_toolbar button .icon {
font-size: 12px; }
.reportbuilder-sidebar-menu-cards {
max-height: 60vh;
overflow-y: auto; }
.reportbuilder-sidebar-menu-cards::-webkit-scrollbar {
-webkit-appearance: none;
@ -20776,36 +20775,43 @@ div.editor_atto_toolbar button .icon {
background-color: white;
border-left: 5px solid #fff; }
/* Customreport settings */
@media (min-width: 768px) {
.reportbuilder-sidebar-settings {
width: 350px;
flex-shrink: 0; } }
.reportbuilder-sidebar-settings .list-group-item {
padding: .75rem; }
.reportbuilder-sidebar-settings .list-group-item .icon {
width: 12px;
height: 12px;
font-size: 12px;
color: #1d2125; }
.reportbuilder-sidebar-settings .list-group-item button[data-action="report-remove-filter"] .icon,
.reportbuilder-sidebar-settings .list-group-item button[data-action="report-remove-condition"] .icon {
margin-right: 0;
vertical-align: text-top; }
.reportbuilder-sidebar-settings .list-group-item span[data-drag-type="move"] .icon {
vertical-align: text-top; }
.reportbuilder-sidebar-settings div[data-region="settings-sorting"] .list-group-item span[data-drag-type="move"] .icon {
vertical-align: middle; }
.reportbuilder-sidebar-settings div[data-region="settings-cardview"] form .col-md-3,
.reportbuilder-sidebar-settings div[data-region="settings-cardview"] form .col-md-9 {
flex: 1 1;
max-width: initial; }
.reportbuilder-sidebar-settings div[data-region="settings-cardview"] form div[data-fieldtype="submit"] {
flex-basis: auto; }
/* Settings sidebar */
.reportbuilder-sidebar-settings {
overflow-y: auto; }
.reportbuilder-sidebar-settings::-webkit-scrollbar {
-webkit-appearance: none;
appearance: none; }
.reportbuilder-sidebar-settings::-webkit-scrollbar-thumb {
background-color: #ced4da;
border-left: 5px solid #fff; }
.reportbuilder-sidebar-settings::-webkit-scrollbar-track {
background-color: white;
border-left: 5px solid #fff; }
@media (min-width: 992px) {
.reportbuilder-sidebar-settings {
width: 350px;
flex-shrink: 0; } }
.reportbuilder-sidebar-settings .list-group-item {
padding: .75rem; }
.reportbuilder-sidebar-settings .list-group-item .icon {
width: 12px;
height: 12px;
font-size: 12px;
color: #1d2125; }
.reportbuilder-sidebar-settings .list-group-item button[data-action="report-remove-filter"] .icon,
.reportbuilder-sidebar-settings .list-group-item button[data-action="report-remove-condition"] .icon {
margin-right: 0;
vertical-align: text-top; }
.reportbuilder-sidebar-settings .list-group-item span[data-drag-type="move"] .icon {
vertical-align: text-top; }
.reportbuilder-sidebar-settings div[data-region="settings-sorting"] .list-group-item span[data-drag-type="move"] .icon {
vertical-align: middle; }
.reportbuilder-sidebar-settings div[data-region="settings-cardview"] form .col-md-3,
.reportbuilder-sidebar-settings div[data-region="settings-cardview"] form .col-md-9 {
flex: 1 1;
max-width: initial; }
.reportbuilder-sidebar-settings div[data-region="settings-cardview"] form div[data-fieldtype="submit"] {
flex-basis: auto; }
/* Add button styles when a toggle button is active. */
.reportbuilder-wrapper button.btn-outline-secondary[data-toggle="collapse"]:not(.collapsed),
@ -20826,6 +20832,49 @@ div.editor_atto_toolbar button .icon {
background-color: #fff;
opacity: 0.85; }
/* Reportbuilder full page styles. */
@media (min-width: 992px) {
.path-admin-reportbuilder.pagelayout-popup.behat-site .fixed-top {
position: fixed; }
.path-admin-reportbuilder.pagelayout-popup #region-main {
border: none;
padding: 0; }
.path-admin-reportbuilder.pagelayout-popup #maincontent {
visibility: hidden; }
.path-admin-reportbuilder.pagelayout-popup .dynamictabs .nav-tabs {
position: fixed;
z-index: 1030;
width: calc(100% - 35px);
padding-top: 1.25rem;
background-color: #fff;
box-shadow: 0 1.25rem 0 #fff; }
.path-admin-reportbuilder.pagelayout-popup .dynamictabs .tab-content {
padding-top: 83px; }
.path-admin-reportbuilder.pagelayout-popup .reportbuilder-sidebar-menu {
position: fixed; }
.path-admin-reportbuilder.pagelayout-popup .reportbuilder-sidebar-menu .reportbuilder-sidebar-menu-cards {
max-height: calc(100vh - 163px - 52px); }
.path-admin-reportbuilder.pagelayout-popup .reportbuilder-sidebar-settings {
position: fixed;
right: 30px;
max-height: calc(100vh - 163px); }
.path-admin-reportbuilder.pagelayout-popup .reportbuilder-report[data-editing] .reportbuilder-report-container {
max-height: calc(100vh - 163px);
overflow-y: auto;
margin-left: calc(250px + 1rem);
margin-right: calc(350px + 1rem); }
.path-admin-reportbuilder.pagelayout-popup .reportbuilder-report[data-editing] .reportbuilder-report-container::-webkit-scrollbar {
-webkit-appearance: none;
appearance: none; }
.path-admin-reportbuilder.pagelayout-popup .reportbuilder-report[data-editing] .reportbuilder-report-container::-webkit-scrollbar-thumb {
background-color: #ced4da;
border-left: 5px solid #fff; }
.path-admin-reportbuilder.pagelayout-popup .reportbuilder-report[data-editing] .reportbuilder-report-container::-webkit-scrollbar-track {
background-color: white;
border-left: 5px solid #fff; }
.path-admin-reportbuilder.pagelayout-popup .reportbuilder-audiences-container {
margin-left: calc(250px + 1rem); } }
/* Toggle cards. */
.reportbuilder-toggle-card .card-header {
border-bottom: none; }

115
theme/classic/style/moodle.css
View File

@ -20629,7 +20629,7 @@ div.editor_atto_toolbar button .icon {
margin-top: 50px; }
/**
* Reportbuilder table.
* Reportbuilder.
*/
/* Table */
/* Filters */
@ -20697,7 +20697,7 @@ div.editor_atto_toolbar button .icon {
margin-right: 0; }
/* Sidebar menu */
@media (min-width: 768px) {
@media (min-width: 992px) {
.reportbuilder-sidebar-menu {
width: 250px;
flex-shrink: 0; } }
@ -20710,7 +20710,6 @@ div.editor_atto_toolbar button .icon {
font-size: 12px; }
.reportbuilder-sidebar-menu-cards {
max-height: 60vh;
overflow-y: auto; }
.reportbuilder-sidebar-menu-cards::-webkit-scrollbar {
-webkit-appearance: none;
@ -20722,36 +20721,43 @@ div.editor_atto_toolbar button .icon {
background-color: white;
border-left: 5px solid #fff; }
/* Customreport settings */
@media (min-width: 768px) {
.reportbuilder-sidebar-settings {
width: 350px;
flex-shrink: 0; } }
.reportbuilder-sidebar-settings .list-group-item {
padding: .75rem; }
.reportbuilder-sidebar-settings .list-group-item .icon {
width: 12px;
height: 12px;
font-size: 12px;
color: #1d2125; }
.reportbuilder-sidebar-settings .list-group-item button[data-action="report-remove-filter"] .icon,
.reportbuilder-sidebar-settings .list-group-item button[data-action="report-remove-condition"] .icon {
margin-right: 0;
vertical-align: text-top; }
.reportbuilder-sidebar-settings .list-group-item span[data-drag-type="move"] .icon {
vertical-align: text-top; }
.reportbuilder-sidebar-settings div[data-region="settings-sorting"] .list-group-item span[data-drag-type="move"] .icon {
vertical-align: middle; }
.reportbuilder-sidebar-settings div[data-region="settings-cardview"] form .col-md-3,
.reportbuilder-sidebar-settings div[data-region="settings-cardview"] form .col-md-9 {
flex: 1 1;
max-width: initial; }
.reportbuilder-sidebar-settings div[data-region="settings-cardview"] form div[data-fieldtype="submit"] {
flex-basis: auto; }
/* Settings sidebar */
.reportbuilder-sidebar-settings {
overflow-y: auto; }
.reportbuilder-sidebar-settings::-webkit-scrollbar {
-webkit-appearance: none;
appearance: none; }
.reportbuilder-sidebar-settings::-webkit-scrollbar-thumb {
background-color: #ced4da;
border-left: 5px solid #fff; }
.reportbuilder-sidebar-settings::-webkit-scrollbar-track {
background-color: white;
border-left: 5px solid #fff; }
@media (min-width: 992px) {
.reportbuilder-sidebar-settings {
width: 350px;
flex-shrink: 0; } }
.reportbuilder-sidebar-settings .list-group-item {
padding: .75rem; }
.reportbuilder-sidebar-settings .list-group-item .icon {
width: 12px;
height: 12px;
font-size: 12px;
color: #1d2125; }
.reportbuilder-sidebar-settings .list-group-item button[data-action="report-remove-filter"] .icon,
.reportbuilder-sidebar-settings .list-group-item button[data-action="report-remove-condition"] .icon {
margin-right: 0;
vertical-align: text-top; }
.reportbuilder-sidebar-settings .list-group-item span[data-drag-type="move"] .icon {
vertical-align: text-top; }
.reportbuilder-sidebar-settings div[data-region="settings-sorting"] .list-group-item span[data-drag-type="move"] .icon {
vertical-align: middle; }
.reportbuilder-sidebar-settings div[data-region="settings-cardview"] form .col-md-3,
.reportbuilder-sidebar-settings div[data-region="settings-cardview"] form .col-md-9 {
flex: 1 1;
max-width: initial; }
.reportbuilder-sidebar-settings div[data-region="settings-cardview"] form div[data-fieldtype="submit"] {
flex-basis: auto; }
/* Add button styles when a toggle button is active. */
.reportbuilder-wrapper button.btn-outline-secondary[data-toggle="collapse"]:not(.collapsed),
@ -20772,6 +20778,49 @@ div.editor_atto_toolbar button .icon {
background-color: #fff;
opacity: 0.85; }
/* Reportbuilder full page styles. */
@media (min-width: 992px) {
.path-admin-reportbuilder.pagelayout-popup.behat-site .fixed-top {
position: fixed; }
.path-admin-reportbuilder.pagelayout-popup #region-main {
border: none;
padding: 0; }
.path-admin-reportbuilder.pagelayout-popup #maincontent {
visibility: hidden; }
.path-admin-reportbuilder.pagelayout-popup .dynamictabs .nav-tabs {
position: fixed;
z-index: 1030;
width: calc(100% - 35px);
padding-top: 1.25rem;
background-color: #fff;
box-shadow: 0 1.25rem 0 #fff; }
.path-admin-reportbuilder.pagelayout-popup .dynamictabs .tab-content {
padding-top: 83px; }
.path-admin-reportbuilder.pagelayout-popup .reportbuilder-sidebar-menu {
position: fixed; }
.path-admin-reportbuilder.pagelayout-popup .reportbuilder-sidebar-menu .reportbuilder-sidebar-menu-cards {
max-height: calc(100vh - 153px - 52px); }
.path-admin-reportbuilder.pagelayout-popup .reportbuilder-sidebar-settings {
position: fixed;
right: 30px;
max-height: calc(100vh - 153px); }
.path-admin-reportbuilder.pagelayout-popup .reportbuilder-report[data-editing] .reportbuilder-report-container {
max-height: calc(100vh - 153px);
overflow-y: auto;
margin-left: calc(250px + 1rem);
margin-right: calc(350px + 1rem); }
.path-admin-reportbuilder.pagelayout-popup .reportbuilder-report[data-editing] .reportbuilder-report-container::-webkit-scrollbar {
-webkit-appearance: none;
appearance: none; }
.path-admin-reportbuilder.pagelayout-popup .reportbuilder-report[data-editing] .reportbuilder-report-container::-webkit-scrollbar-thumb {
background-color: #ced4da;
border-left: 5px solid #fff; }
.path-admin-reportbuilder.pagelayout-popup .reportbuilder-report[data-editing] .reportbuilder-report-container::-webkit-scrollbar-track {
background-color: white;
border-left: 5px solid #fff; }
.path-admin-reportbuilder.pagelayout-popup .reportbuilder-audiences-container {
margin-left: calc(250px + 1rem); } }
/* Toggle cards. */
.reportbuilder-toggle-card .card-header {
border-bottom: none; }