#51 extract option loader, merge group loaders

media/js/dean/bill.js

 $(function () {
-    var jSemesterSelect = $('#semesterSelect');
-    var jGradeSelect = $('#gradeSelect');
-    var jGroupSelect = $('#groupSelect');
-    var jSpinner = $('.loadingSpinner');
-    var jContent = $('.billContent');
-
-    jSemesterSelect.change(function () {
-        var sem_id = jSemesterSelect.find('option:selected').val();
-        if (sem_id != 0) {
-            jGradeSelect.prop('disabled', false);
-        } else {
-            jGradeSelect.prop('disabled', true);
-            jGroupSelect.prop('disabled', true);
+    let settings = (() => {
+        let $hiddenInfo = $('#hidden_div');
+        let settings = $.parseJSON($hiddenInfo.html());
+        $hiddenInfo.remove();
+        return settings;
+    })();
+
+    let $semesterSelect = $('#semesterSelect');
+    let $gradeSelect = $('#gradeSelect');
+    let $groupSelect = $('#groupSelect');
+    let $spinner = $('.loadingSpinner');
+    let $content = $('.billContent');
+
+    let showContent = (data) => {
+        $spinner.css('display', 'none');
+        $content.html(data);
+        $content.css('display', 'block');
+    };
+    let visualizeLoading = () => {
+        $content.hide();
+        $spinner.show();
+    };
+
+    let loadContent = () => {
+        let semesterID = +$semesterSelect.val();
+        let groupID = +$groupSelect.val();
+        if (groupID <= 0)
+            return;
+
+        visualizeLoading();
+        $.post(`${URLdir}office/bill/group/${groupID}`, {semesterID}, showContent);
+    };
+
+    let groupSelect = getGroupLoader($groupSelect,
+        () => ({"FacultyID": settings.facultyID, "GradeID": $gradeSelect.val()})
+    ).setOnChange(loadContent);
+
+    let gradeSelect = getGradeLoader($gradeSelect, OptionLoader.stubFoo)
+    .setOnChange(() => {
+        let gradeID = +$gradeSelect.val();
+        if (gradeID <= 0) {
+            $groupSelect.turnOff();
+            return;
         }
+        $groupSelect.turnOn();
+        groupSelect.reload();
     });
 
-    jGradeSelect.change(function () {
-        var gr_id = jGradeSelect.find('option:selected').val();
-        if (gr_id) {
-            jGroupSelect.prop('disabled', false);
-            $.post(URLdir + 'handler/Transfer/getGroups', // todo: handler students
-                {'gradeID': jGradeSelect.find('option:selected').val()},
-                function (data) {
-                    jGroupSelect.html(data);
-                });
+    gradeSelect.reload();
+    $semesterSelect.change(() => {
+        let semesterID = +$semesterSelect.val();
+        if (semesterID <= 0) {
+            $gradeSelect.turnOff();
+            $groupSelect.turnOff();
         } else {
-            jGroupSelect.prop('disabled', true);
+            $gradeSelect.turnOn();
+            $gradeSelect.val(0);
         }
     });
 
-    jGroupSelect.change(function () {
-        var sem_id = jSemesterSelect.find('option:selected').val();
-        var gr_id = jGroupSelect.find('option:selected').val();
-        if (gr_id) {
-            jContent.css('display', 'none');
-            jSpinner.css('display', 'block');
-            $.post(URLdir + 'office/bill/group/' + gr_id,
-                {
-                    'semesterID': sem_id
-                },
-                function (data) {
-                    jSpinner.css('display', 'none');
-                    jContent.html(data);
-                    jContent.css('display', 'block');
-                });
-        }
-    });
 });

media/js/optionLoader.js

+
+class OptionLoader {
+
+    /**
+     * @param {string} placeholder
+     * @returns {string}
+     */
+    static generatePlaceholderOption(placeholder) {
+        if (placeholder)
+            return `<option value="0">${placeholder}</option>`;
+        return '';
+    }
+
+    /**
+     * @callback optionFactoryCallback
+     * @param {object}
+     */
+    /**
+     * @param {Object[]} data
+     * @param {optionFactoryCallback} optionFactory
+     */
+    static constructSelectData(data, optionFactory) {
+        let html = '';
+        data.forEach(rec => html += optionFactory(rec));
+        return html;
+    };
+
+    static stubFoo () {};
+
+    constructor({$select, factory, url, genParams}) {
+        this.$select = $select;
+        this.factory = factory;
+
+        this.url = URLdir + url;
+        this.genParams = genParams;
+
+        $select.change(() => this.onChange());
+
+        // stubs
+        this.onChange = OptionLoader.stubFoo;
+        this.onReload = OptionLoader.stubFoo;
+        this.placeholder = '';
+    }
+
+    reload() {
+        $.postJSON(this.url, this.genParams(), data => {
+            let html = this.placeholder + OptionLoader.constructSelectData(data, this.factory);
+            this.$select.empty();
+            this.$select.append($(html));
+            this.onReload();
+        });
+    }
+
+    setPlaceholder(placeholder) {
+        this.placeholder = OptionLoader.generatePlaceholderOption(placeholder);
+        return this;
+    }
+
+    setOnChange(callback) {
+        this.onChange = callback;
+        return this;
+    }
+    setOnReload(callback) {
+        this.onReload = callback;
+        return this;
+    }
+}
+
+
+// ============================
+//      groups
+// ============================
+
+/**
+ * @var {optionFactoryCallback}
+ * @param {number} data.ID
+ * @param {number} data.GroupNum
+ * @param {string} data.SpecName
+ */
+let getGroupOption = (data) => {
+    let str = `группа ${data.GroupNum}`;
+    if (data.SpecName) {
+        str += " - ";
+        str += data.SpecName;
+    }
+    return `<option value='${data.ID}'>${str}</option>`;
+};
+
+let getGroupLoader = ($select, genParams) => {
+    let groupSelect = new OptionLoader({
+        $select: $select,
+        factory: getGroupOption,
+        url: 'handler/map/GetGroups',
+        genParams: genParams
+    });
+    groupSelect
+        .setPlaceholder($select.children().html());
+    return groupSelect;
+};
+
+
+// ============================
+//      groups
+// ============================
+
+/**
+ * @var {optionFactoryCallback}
+ * @param {number} data.ID
+ * @param {number} data.Num
+ * @param {string} data.Degree
+ */
+let getGradeOption = (data) => {
+    let title = (data.Degree == 'master') ? 'Магистратура' : 'Курс';
+    let str = `${title} ${data.Num}`;
+    return `<option value='${data.ID}'>${str}</option>`;
+};
+
+let getGradeLoader = ($select, genParams) => {
+    let gradeSelect = new OptionLoader({
+        $select: $select,
+        factory: getGradeOption,
+        url: 'handler/map/GetGrades',
+        genParams: genParams
+    });
+    gradeSelect
+        .setPlaceholder($select.children().html());
+    return gradeSelect;
+};

~dev_rating/application/classes/Controller/Handler/Map.php

@@ -168,6 +168,11 @@ class Controller_Handler_Map extends Controller_Handler
         $this->response->body(json_encode($groups));
     }
 
+    public function action_GetGrades() {
+        $grades = Model_Grades::loadAll()->as_array();
+        $this->response->body(json_encode($grades));
+    }
+
     public function action_SearchStudents() {
         $result = Model_Students::search($_POST['GradeID'], $_POST['GroupID'], $_POST['FacultyID'], $_POST['Name'], $_POST['DisciplineID']);
         $this->response->body(json_encode($result));

~dev_rating/application/classes/Controller/Handler/Transfer.php

-<?php defined('SYSPATH') or die('No direct script access.');
-class Controller_Handler_Transfer extends Controller_Handler
-{
-    public function before() {
-        parent::before();
-    }
-
-    public function action_getGroups() {
-        $gradeId = $this->post['gradeID'];
-        $twig = Twig::factory('handler/listGroups');
-        $twig->Groups = $this->user->Faculty->getGroups($gradeId);
-        $this->response->body($twig->render());
-    }
-}

~dev_rating/application/classes/Controller/Office/Groups.php

@@ -4,9 +4,6 @@ class Controller_Office_Groups extends Controller_Environment_Office
 {
     public function action_bill()
     {
-        $this->twig->set_filename(static::OFFICE . '/groups/bill')
-            ->set([
-                'Grades' => Model_Grades::loadAll()
-            ]);
+        $this->twig->set_filename(static::OFFICE . '/groups/bill');
     }
 }

~dev_rating/application/views/dean_office/readme.dont_use

-ACHTUNG!!!1

~dev_rating/application/views/handler/listGroups.twig

-{# Генерация списка групп #}
-<option value="-1">-- Выберите группу --</option>
-{% for Group in Groups %}
-    <option value = {{ Group.ID }}>
-        Группа № {{ Group.GroupNum }} - {{ Group.SpecAbbr }}
-    </option>
-{%  endfor %}

~dev_rating/application/views/office/groups/bill.twig

@@ -4,6 +4,7 @@
 
 {% block office_media %}
     {{ HTML.style('static/css/bill.css')|raw }}
+    {{ HTML.script('static/js/optionLoader.js')|raw }}
     {{ HTML.script('static/js/dean/bill.js')|raw }}
 {% endblock %}
 
@@ -19,19 +20,15 @@
         </select>
 
         <select class="defaultForm" id="gradeSelect">
-            <option value="-1">— Выберите курс —</option>
-            {% for Grade in Grades %}
-                <option value="{{ Grade.ID }}">
-                    {{ Grade.Num }} курс
-                </option>
-            {% endfor %}
+            <option value="0">— Выберите курс —</option>
         </select>
 
         <select class="defaultForm" id="groupSelect">
-            <option value="-1">— Выберите группу —</option>
+            <option value="0">— Выберите группу —</option>
         </select>
     </div>
 
     <div class="loadingSpinner"></div>
     <div class="billContent"></div>
+    <div id="hidden_div" style="display: none">{ "facultyID" : {{ User.FacultyID }} }</div>
 {% endblock %}

~dev_rating/application/views/teacher/discipline/edit/students.twig

@@ -3,6 +3,7 @@
 {% set step_5 = 'active' %}
 
 {% block discipline_media %}
+    {{ HTML.script('static/js/optionLoader.js')|raw }}
     {{ HTML.script('static/js/discipline/editStudents.js')|raw }}
     {{ HTML.style('static/css/teacher/discipline/editStudents.css')|raw }}
 {% endblock %}