LIL-90 LIL-89 - Подгрузка и фильтрация курсов

apps/course/templates/course/courses.html

@@ -35,7 +35,7 @@
         </div>
         <div class="courses__load load">
           {% if page_obj.has_next %}
-          <button class="load__btn btn" data-next-page-url="?page={{ page_obj.next_page_number }}">Подгрузить еще</button>
+          <button class="load__btn btn" data-next-page-url="{% url 'courses' %}?page={{ page_obj.next_page_number }}">Подгрузить еще</button>
           {% endif %}
         </div>
       </div>

apps/course/templates/course/inclusion/category_items.html

@@ -1,5 +1,5 @@
 {% for category in category_items %}
-  <div class="select__option js-select-option">
+  <div class="select__option js-select-option" data-category-option data-category-url="{% url 'courses' %}?category={{ category.title }}">
     <div class="select__title">{{ category.title }}</div>
   </div>
 {% endfor %}

web/package-lock.json

@@ -5597,6 +5597,18 @@
         "sntp": "1.0.9"
       }
     },
+    "history": {
+      "version": "4.7.2",
+      "resolved": "https://registry.npmjs.org/history/-/history-4.7.2.tgz",
+      "integrity": "sha512-1zkBRWW6XweO0NBcjiphtVJVsIQ+SXF29z9DVkceeaSLVMFXHool+fdCZD4spDCfZJCILPILc3bm7Bc+HRi0nA==",
+      "requires": {
+        "invariant": "2.2.2",
+        "loose-envify": "1.3.1",
+        "resolve-pathname": "2.2.0",
+        "value-equal": "0.4.0",
+        "warning": "3.0.0"
+      }
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -5756,7 +5768,6 @@
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.2.tgz",
       "integrity": "sha1-nh9WrArNtr8wMwbzOL47IErmA2A=",
-      "dev": true,
       "requires": {
         "loose-envify": "1.3.1"
       }
@@ -6151,8 +6162,7 @@
     "js-tokens": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
-      "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=",
-      "dev": true
+      "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls="
     },
     "js-yaml": {
       "version": "3.10.0",
@@ -6780,7 +6790,6 @@
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz",
       "integrity": "sha1-0aitM/qc4OcT1l/dCsi3SNR4yEg=",
-      "dev": true,
       "requires": {
         "js-tokens": "3.0.2"
       }
@@ -8550,6 +8559,11 @@
         "global-modules": "1.0.0"
       }
     },
+    "resolve-pathname": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz",
+      "integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg=="
+    },
     "resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -10098,6 +10112,11 @@
       "resolved": "https://registry.npmjs.org/validator/-/validator-9.2.0.tgz",
       "integrity": "sha512-6Ij4Eo0KM4LkR0d0IegOwluG5453uqT5QyF5SV5Ezvm8/zmkKI/L4eoraafZGlZPC9guLkwKzgypcw8VGWWnGA=="
     },
+    "value-equal": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz",
+      "integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw=="
+    },
     "verror": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
@@ -10248,6 +10267,14 @@
       "integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=",
       "dev": true
     },
+    "warning": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+      "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+      "requires": {
+        "loose-envify": "1.3.1"
+      }
+    },
     "watchpack": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.4.0.tgz",

web/package.json

@@ -44,6 +44,7 @@
     "webpack": "^3.10.0"
   },
   "dependencies": {
+    "history": "^4.7.2",
     "jquery": "^3.3.1",
     "owl.carousel": "^2.2.0",
     "validator": "^9.2.0"

web/src/js/app.js

@@ -10,3 +10,5 @@ import "./modules/select";
 // import "./modules/datepicker";
 import "./modules/tabs";
 import "./modules/popup";
+
+import "./modules/courses";

web/src/js/modules/courses.js

@@ -1,39 +1,53 @@
 import $ from 'jquery';
+import createHistory from 'history/createBrowserHistory';
+
+// Создаем объект history API
+const history = createHistory();
 
 $(document).ready(function () {
     // Обработчик кнопки "Подгрузить еще"
-    $('.courses__list').on('click', 'button.load__btn', function () {
-        load_courses($(this).attr('data-next-page-url'), $(this));
+    $('.courses').on('click', 'button.load__btn', function () {
+        load_courses($(this).attr('data-next-page-url'), false);
     });
 
     // Обработчик выбора категории
     $('div.js-select-option[data-category-option]').on('click', function (e) {
         e.preventDefault();
-        load_courses($(this).attr('data-category-url'), null);
+        history.replace($(this).attr('data-category-url'));
+        load_courses($(this).attr('data-category-url'), true);
     });
 });
 
-function load_courses(coursesUrl, buttonElement) {
-    if (buttonElement) {
+function load_courses(coursesUrl, fromStart) {
+    $('.courses__list').css('opacity', '0.9');
+    const buttonElement = $('.courses').find('button.load__btn');
+    if (!fromStart) {
         buttonElement.addClass('loading');
-    } else {
-        $('.courses__list').css('opacity', '0.9');
     }
     $.ajax(coursesUrl, {
-        method: 'GET',
-        dataType: 'html',
+        method: 'GET'
     })
         .done(function (data) {
-            $('.courses__list').html(data);
+            if (data.success === true) {
+                if (!fromStart) {
+                    $('.courses__list').append(data.content);
+                } else {
+                    $('.courses__list').html(data.content);
+                }
+                if (data.next_url) {
+                    buttonElement.attr('data-next-page-url', data.next_url)
+                } else {
+                    buttonElement.hide()
+                }
+            }
         })
         .fail(function (xhr) {
-            if (buttonElement) {
-                buttonElement.removeClass('loading');
-            }
+
         })
         .always(function () {
-            if (!buttonElement) {
-                $('.courses__list').css('opacity', '1');
+            $('.courses__list').css('opacity', '1');
+            if (buttonElement) {
+                buttonElement.removeClass('loading');
             }
         });
 }