Proyectos de Subversion Moodle

{{!
    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 tool_supporter/course_table
    Template which outputs a table of courses.

    Classes required for JS:
    * dataTables

    Context variables required for this template:
    * courses - array of arrays: course details to be displayed in a table.

Example context (json):
{
  "courses": [
        {
      "id": 8,
      "startdate": "27/08/2022, 11:00:00",
      "shortname": "Kurs level 2",
      "fullname": "Kurs level 2",
      "level_two": "",
      "level_one": "Top Level 2",
      "visible": 1
    },
    {
      "id": 9,
      "startdate": "24/12/2022, 00:00:00",
      "shortname": "Kurs level 2.1",
      "fullname": "Kurs level 2.1",
      "level_two": "Level 2.1",
      "level_one": "Top Level 2",
      "visible": 1
    },
    {
      "id": 17,
      "startdate": "31/12/2022, 00:00:00",
      "shortname": "eee",
      "fullname": "eee",
      "level_two": "Level 2.1",
      "level_one": "Top Level 2",
      "visible": 0
    },
    {
      "id": 19,
      "startdate": "01/07/2022, 09:00:00",
      "shortname": "Ebene 3 Kurs",
      "fullname": "Ebene 3 Kurs",
      "level_two": "Verschiedenes 1",
      "level_one": "Verschiedenes",
      "visible": 0
    },
    {
      "id": 21,
      "startdate": "22/07/2022, 09:00:00",
      "shortname": "FB 01 Kurs im WS 17 18",
      "fullname": "FB 01 Kurs im WS 17 18",
      "level_two": "FB 01",
      "level_one": "WiSe 2017/2018",
      "visible": 1
    },
    {
      "id": 30,
      "startdate": "05/03/2022, 10:00:00",
      "shortname": "test",
      "fullname": "test",
      "level_two": "",
      "level_one": "Verschiedenes",
      "visible": 0
    }
  ],
  "uniqueleveltwoes": [
    "Verschiedenes 1",
    "Testbereich mit (Klammern)",
    "Level 1.1",
    "Level 2.1",
    "FB 01",
    "FB 02",
    "FB 03"
  ],
  "uniquelevelones": [
    "Verschiedenes",
    "Top Level 1",
    "Top Level 2",
    "SoSe 2018",
    "WiSe 2017/2018",
    "Semesteruebergreifende Kurse",
    "HRZ / E-Learning - Weiterbildung",
    "WiSe 2018/19",
    "SoSe 2019"
  ],
  "label_level_1": "Semester",
  "label_level_2": "Fachbereich",
  "searchname": "Suchen",
  "refreshname": "Aktualisieren"
}

}}
<div data-region="course_table" class="card rui-supporter-table">
        <div class = "card-header">
                <div class="row">
                    <div class="col">
          <h4 class="card-title">{{#str}}courses{{/str}}
          <button class="ml-4 btn btn-xs p-1 btn-secondary" id="btn_refresh_courses">{{#pix}} a/refresh, core, {{refreshname}} {{/pix}}</button>
          </h4>
        </div>
                </div>
        </div>

    <div id="course_table_filtering" style="visibility: hidden;">
        <div class="btn-toolbar ml-3 mt-1" role="toolbar">
            <div class="btn-group" role="group">
                <select id="course_table_column_chooser" class="form-control custom-select mr-1">
                    <!-- Additional Options will be added later with javascript -->
                    <option selected value="-1">{{#str}}all{{/str}}</option>
                </select>
            </div>
            <div class="btn-group" role="group" style="width: 55%">
                <input type="text" id="course_table_search_input" class="form-control form-control-sm" placeholder={{searchname}}>
            </div>
            <button type="button" class="btn btn-sm btn-danger" id="courses_clear_filters" style="visibility: hidden">&times; {{#str}}removeall, filters{{/str}}</button>
        </div>

        <!-- Filtering for course table -->
        <div id ="course_filtering" data-region = "course_filtering">
           <ul class="nav nav-tabs nav-justified">
             <!-- Filter course list by selecting first level category-->
             <li class="nav-item dropdown" {{^showlevel1}}hidden{{/showlevel1}}>
               <a class = "nav-link dropdown-toggle" href="javascript:void(0)" data-toggle="dropdown">{{label_level_1}}<span class="caret"></span></a>

               <ul class="dropdown-menu" id="courses_levelonedropdown">
                 {{#uniquelevelones}}
                    <li class = "dropdown-item" style="padding: 0 0 0 1.5rem"> <!-- padding: top, right, bottom, left -->
                        <label><input type="checkbox" value="{{{.}}}" name="courses_levelonecheckbox"> {{{.}}}</label>
                    </li>
                 {{/uniquelevelones}}
               </ul>
             </li>
            <!-- Filter course list by selecting second level category -->
             <li class="nav-item dropdown" {{^showlevel2}}hidden{{/showlevel2}}>
               <a class = "nav-link dropdown-toggle" href="javascript:void(0)" data-toggle="dropdown">{{label_level_2}}<span class="caret"></span></a>
               <ul class="dropdown-menu" id="courses_leveltwodropdown">
                 {{#uniqueleveltwoes}}
                    <li class = "dropdown-item" style="padding: 0 0 0 1.5rem"> <!-- padding: top, right, bottom, left -->
                        <label><input type="checkbox" value="{{{.}}}" name="courses_leveltwocheckbox"> {{{.}}}</label>
                    </li>
                 {{/uniqueleveltwoes}}
               </ul>
             </li>
               <!-- Filter course list by selecting third level category -->
               <li class="nav-item dropdown" {{^showlevel3}}hidden{{/showlevel3}}>
                   <a class = "nav-link dropdown-toggle" href="javascript:void(0)" data-toggle="dropdown">{{label_level_3}}<span class="caret"></span></a>
                   <ul class="dropdown-menu" id="courses_levelthreedropdown">
                       {{#uniquelevelthrees}}
                           <li class = "dropdown-item" style="padding: 0 0 0 1.5rem"> <!-- padding: top, right, bottom, left -->
                               <label><input type="checkbox" value="{{{.}}}" name="courses_levelthreecheckbox"> {{{.}}}</label>
                           </li>
                       {{/uniquelevelthrees}}
                   </ul>
               </li>
               <!-- Filter course list by selecting fourth level category -->
               <li class="nav-item dropdown" {{^showlevel4}}hidden{{/showlevel4}}>
                   <a class = "nav-link dropdown-toggle" href="javascript:void(0)" data-toggle="dropdown">{{label_level_4}}<span class="caret"></span></a>
                   <ul class="dropdown-menu" id="courses_levelfourdropdown">
                       {{#uniquelevelfours}}
                           <li class = "dropdown-item" style="padding: 0 0 0 1.5rem"> <!-- padding: top, right, bottom, left -->
                               <label><input type="checkbox" value="{{{.}}}" name="courses_levelfourcheckbox"> {{{.}}}</label>
                           </li>
                       {{/uniquelevelfours}}
                   </ul>
               </li>
               <!-- Filter course list by selecting fifth level category -->
               <li class="nav-item dropdown" {{^showlevel5}}hidden{{/showlevel5}}>
                   <a class = "nav-link dropdown-toggle" href="javascript:void(0)" data-toggle="dropdown">{{label_level_5}}<span class="caret"></span></a>
                   <ul class="dropdown-menu" id="courses_levelfivedropdown">
                       {{#uniquelevelfives}}
                           <li class = "dropdown-item" style="padding: 0 0 0 1.5rem"> <!-- padding: top, right, bottom, left -->
                               <label><input type="checkbox" value="{{{.}}}" name="courses_levelfivecheckbox"> {{{.}}}</label>
                           </li>
                       {{/uniquelevelfives}}
                   </ul>
               </li>
          </ul>
        </div>
    </div>

        <div class = "table table-responsive">
          <table id = "courseTable" class="stripe hover row-border">
            <thead>
              <tr>
              <th>ID</th>
              <th>{{#str}}shortnamecourse{{/str}}</th>
              <th>{{#str}}fullnamecourse{{/str}}</th>
              <th {{^showlevel1}}hidden{{/showlevel1}}>{{label_level_1}}</th>
              <th {{^showlevel2}}hidden{{/showlevel2}}>{{label_level_2}}</th>
              <th {{^showlevel3}}hidden{{/showlevel3}}>{{label_level_3}}</th>
              <th {{^showlevel4}}hidden{{/showlevel4}}>{{label_level_4}}</th>
              <th {{^showlevel5}}hidden{{/showlevel5}}>{{label_level_5}}</th>
              <th>{{#str}}startdate{{/str}}</th>
              <th>{{#str}}visible{{/str}}</th>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>

        <span class="loading-icon text-center" id="courseTable-loadingIcon">{{#pix}} i/loading, core, {{#str}} loading {{/str}} {{/pix}}</span>
</div>

{{#js}}
require(['tool_supporter/load_information', 'jquery', 'core/ajax', 'core/notification', 'core/templates',
         'tool_supporter/datatables', 'tool_supporter/table_filter'],
    function(loadInformation, $, ajax, notification, templates, datatables, tableFilter) {

        var columns1 = [
            {data: 'id', "searchable": true, name: 'ID'},
            {data: 'shortname', "searchable": true, name: '{{#str}}shortnamecourse{{/str}}',
                "visible": {{#showshortname}}true{{/showshortname}}{{^showshortname}}false{{/showshortname}}},
            {data: 'fullname', name: '{{#str}}fullnamecourse{{/str}}',
                "visible": {{#showfullname}}true{{/showfullname}}{{^showfullname}}false{{/showfullname}}},
            {data: 'level_one', name: '{{label_level_1}}',
                "visible": {{#showlevel1}}true{{/showlevel1}}{{^showlevel1}}false{{/showlevel1}}},
            {data: 'level_two', name: '{{label_level_2}}',
                "visible": {{#showlevel2}}true{{/showlevel2}}{{^showlevel2}}false{{/showlevel2}}},
            {data: 'level_three', name: '{{label_level_3}}',
                "visible": {{#showlevel3}}true{{/showlevel3}}{{^showlevel3}}false{{/showlevel3}}},
            {data: 'level_four', name: '{{label_level_4}}',
                "visible": {{#showlevel4}}true{{/showlevel4}}{{^showlevel4}}false{{/showlevel4}}},
            {data: 'level_five', name: '{{label_level_5}}',
                "visible": {{#showlevel5}}true{{/showlevel5}}{{^showlevel5}}false{{/showlevel5}}},
            {data: 'startdate', name: '{{#str}}startdate{{/str}}',
                "visible": {{#showstartdate}}true{{/showstartdate}}{{^showstartdate}}false{{/showstartdate}}},
            {data: 'visible', name: '{{#str}}visible{{/str}}',
                "visible": {{#showvisible}}true{{/showvisible}}{{^showvisible}}false{{/showvisible}}}
                       ];

        // Convert the table to dataTable and apply Filtering.
        datatables.dataTableAjax('#courseTable', 'tool_supporter_get_courses', {}, 'courses', columns1);

        // Refresh this table.
        loadInformation.clickOnRefresh('#courseTable', 'tool_supporter_get_courses', {}, 'courses', columns1);

        // Load detailed information about the clicked course.
        loadInformation.clickOnCourse('#courseTable');

        // Search the table.
        tableFilter.searchTable('#courseTable', '#course_table_column_chooser', '#course_table_search_input', columns1);

        // Clear filters when button is clicked.
        tableFilter.coursesClearFilters('#courseTable');
  });
{{/js}}