MDL-73437 workshop: Use templates for actionbar

* Convert the actionbar to use renderables/templates
* Introduce spacing below tertiary navigation
* Add headings on allocations after tertiary navigation
This commit is contained in:
Peter Dias 2022-01-05 11:24:23 +08:00
parent 0c63990e4f
commit 1a83bd79e0
4 changed files with 89 additions and 17 deletions

View File

@ -63,7 +63,7 @@ $actionbar = new \mod_workshop\output\actionbar($url, $workshop);
$output = $PAGE->get_renderer('mod_workshop');
echo $output->header();
echo $actionbar->get_allocation_menu();
echo $output->render_allocation_menu($actionbar);
if (is_null($initresult->get_status()) or $initresult->get_status() == workshop_allocation_result::STATUS_VOID) {
echo $output->container_start('allocator-ui');

View File

@ -17,7 +17,10 @@
namespace mod_workshop\output;
use moodle_url;
use renderer_base;
use url_select;
use renderable;
use templatable;
/**
* Output the rendered elements for the tertiary nav for page action.
@ -26,7 +29,7 @@ use url_select;
* @copyright 2021 Sujith Haridasan <sujith@moodle.com>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
class actionbar {
class actionbar implements renderable, templatable {
/**
* The current url.
*
@ -52,11 +55,12 @@ class actionbar {
}
/**
* Creates the select menu for allocation page.
* Export the data so it can be used as the context for a mustache template.
*
* @return url_select url_select object.
* @param renderer_base $output
* @return array The urlselect menu and the heading to be used
*/
private function create_select_menu(): url_select {
public function export_for_template(renderer_base $output): array {
$allocators = \workshop::installed_allocators();
$menu = [];
@ -65,18 +69,11 @@ class actionbar {
$menu[$this->workshop->allocation_url($methodid)->out(false)] = $selectorname;
}
return new url_select($menu, $this->currenturl->out(false), null, 'allocationsetting');
}
$urlselect = new url_select($menu, $this->currenturl->out(false), null, 'allocationsetting');
/**
* Rendered HTML for the allocation action.
*
* @return string rendered HTML string
*/
public function get_allocation_menu(): string {
global $OUTPUT;
$urlselect = $this->create_select_menu();
return $OUTPUT->render($urlselect);
return [
'urlselect' => $urlselect->export_for_template($output),
'heading' => $menu[$this->currenturl->out(false)] ?? null
];
}
}

View File

@ -37,6 +37,16 @@ class mod_workshop_renderer extends plugin_renderer_base {
// External API - methods to render workshop renderable components
////////////////////////////////////////////////////////////////////////////
/**
* Renders the tertiary nav for the allocation pages
*
* @param \mod_workshop\output\actionbar $actionbar
* @return bool|string the rendered output
*/
public function render_allocation_menu(\mod_workshop\output\actionbar $actionbar): string {
return $this->render_from_template('mod_workshop/action_bar', $actionbar->export_for_template($this));
}
/**
* Renders workshop message
*

View File

@ -0,0 +1,65 @@
{{!
This file is part of Moodle - https://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 mod_workshop/action_bar
Actions bar at the top of the workshop pages.
Classes required for JS:
* none
Data attributes required for JS:
* none
Context variables required for this template:
* urlselect - The data object containing the required properties to render core/url_select.
* heading - The heading of the page.
Example context (json):
{
"urlselect": {
"id": "url_select_test",
"action": "https://example.com/post",
"formid": "url_select_form",
"sesskey": "sesskey",
"classes": "urlselect",
"label": "",
"helpicon": false,
"showbutton": null,
"options": [
{
"name": "Some name",
"value": "/mod/data/someurl.php",
"selected": false
}
],
"disabled": false,
"title": null
},
"heading": "Print"
}
}}
<div class="container-fluid mb-4">
<div class="row">
<div class="d-flex">
{{#urlselect}}
{{>core/url_select}}
{{/urlselect}}
</div>
</div>
</div>
{{#heading}}<h3>{{heading}}</h3>{{/heading}}