Making Websites With October CMS - Part 43 - Ajax Pagination

ivandoric · Aug 1, 2017 · 0d564a5 · 0d564a5
1 parent df3d12c
commit 0d564a5
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 32 deletions.
diff --git a/octobermovies.sublime-workspace b/octobermovies.sublime-workspace
@@ -3,6 +3,10 @@
 	{
 		"selected_items":
 		[
+			[
+				"par",
+				"partialPaginate"
+			],
 			[
 				"sor",
 				"sortDirection"
@@ -355,7 +359,7 @@
 			"file": "plugins/watchlearn/movies/models/Movie.php",
 			"settings":
 			{
-				"buffer_size": 2499,
+				"buffer_size": 2632,
 				"encoding": "UTF-8",
 				"line_ending": "Unix"
 			}
@@ -364,16 +368,25 @@
 			"file": "themes/olympos/pages/movie-filter-ajax.htm",
 			"settings":
 			{
-				"buffer_size": 2715,
+				"buffer_size": 3009,
 				"encoding": "UTF-8",
 				"line_ending": "Unix"
 			}
 		},
 		{
-			"file": "themes/olympos/assets/js/app.js",
+			"file": "themes/olympos/partials/movies/movies.htm",
 			"settings":
 			{
-				"buffer_size": 325,
+				"buffer_size": 683,
+				"line_ending": "Unix"
+			}
+		},
+		{
+			"file": "themes/olympos/partials/movies/paginate.htm",
+			"settings":
+			{
+				"buffer_size": 313,
+				"encoding": "UTF-8",
 				"line_ending": "Unix"
 			}
 		}
@@ -630,9 +643,9 @@
 	],
 	"file_history":
 	[
+		"/Users/idoric/Development/public/octobermovies/themes/olympos/assets/js/app.js",
 		"/Users/idoric/Development/public/octobermovies/themes/olympos/partials/movies/movies.htm",
 		"/Users/idoric/Development/public/octobermovies/themes/olympos/pages/movie-filter-ajax.htm",
-		"/Users/idoric/Development/public/octobermovies/themes/olympos/assets/js/app.js",
 		"/Users/idoric/Development/public/octobermovies/themes/olympos/pages/filtermovies.htm",
 		"/Users/idoric/Development/public/octobermovies/themes/olympos/pages/homepage.htm",
 		"/Users/idoric/Development/public/octobermovies/themes/olympos/assets/sass/style.scss",
@@ -761,7 +774,7 @@
 	],
 	"find":
 	{
-		"height": 85.0
+		"height": 47.0
 	},
 	"find_in_files":
 	{
@@ -979,23 +992,23 @@
 					"semi_transient": false,
 					"settings":
 					{
-						"buffer_size": 2499,
+						"buffer_size": 2632,
 						"regions":
 						{
 						},
 						"selection":
 						[
 							[
-								1872,
-								1872
+								1436,
+								1436
 							]
 						],
 						"settings":
 						{
 							"syntax": "Packages/PHP/PHP.sublime-syntax"
 						},
 						"translation.x": 0.0,
-						"translation.y": 3172.0,
+						"translation.y": 2312.0,
 						"zoom_level": 1.0
 					},
 					"stack_index": 0,
@@ -1007,54 +1020,83 @@
 					"semi_transient": false,
 					"settings":
 					{
-						"buffer_size": 2715,
+						"buffer_size": 3009,
 						"regions":
 						{
 						},
 						"selection":
 						[
 							[
-								2297,
-								2297
+								651,
+								651
 							]
 						],
 						"settings":
 						{
 							"syntax": "Packages/October Twig Highlighter/october-twig.sublime-syntax"
 						},
 						"translation.x": 0.0,
-						"translation.y": 2476.0,
+						"translation.y": 625.0,
 						"zoom_level": 1.0
 					},
-					"stack_index": 1,
+					"stack_index": 2,
 					"type": "text"
 				},
 				{
 					"buffer": 2,
-					"file": "themes/olympos/assets/js/app.js",
+					"file": "themes/olympos/partials/movies/movies.htm",
+					"semi_transient": true,
+					"settings":
+					{
+						"buffer_size": 683,
+						"regions":
+						{
+						},
+						"selection":
+						[
+							[
+								0,
+								0
+							]
+						],
+						"settings":
+						{
+							"syntax": "Packages/Twig/Syntaxes/HTML (Twig).tmLanguage"
+						},
+						"translation.x": 0.0,
+						"translation.y": 0.0,
+						"zoom_level": 1.0
+					},
+					"stack_index": 3,
+					"type": "text"
+				},
+				{
+					"buffer": 3,
+					"file": "themes/olympos/partials/movies/paginate.htm",
 					"semi_transient": false,
 					"settings":
 					{
-						"buffer_size": 325,
+						"buffer_size": 313,
 						"regions":
 						{
 						},
 						"selection":
 						[
 							[
-								303,
-								303
+								262,
+								262
 							]
 						],
 						"settings":
 						{
-							"syntax": "Packages/JavaScript/JavaScript.sublime-syntax"
+							"_anf_new": "",
+							"syntax": "Packages/Twig/Syntaxes/HTML (Twig).tmLanguage"
 						},
 						"translation.x": 0.0,
-						"translation.y": 144.0,
+						"translation.y": 0.0,
 						"zoom_level": 1.0
 					},
-					"stack_index": 2,
+					"stack_index": 1,
 					"type": "text"
 				}
 			]
@@ -1634,9 +1676,17 @@
 	"select_project":
 	{
 		"height": 500.0,
-		"last_filter": "watc",
+		"last_filter": "wat",
 		"selected_items":
 		[
+			[
+				"wat",
+				"~/Development/public/watchlearn/watchlearn.sublime-project"
+			],
+			[
+				"october",
+				"~/Development/public/october/october.sublime-project"
+			],
 			[
 				"watc",
 				"~/Development/public/watchlearn/watchlearn.sublime-project"
@@ -1661,18 +1711,10 @@
 				"vip",
 				"~/Burza/vip-templates/vip-templates.sublime-project"
 			],
-			[
-				"wat",
-				"~/Development/public/watchlearn/watchlearn.sublime-project"
-			],
 			[
 				"kon",
 				"~/Development/public/iwmndev_vipnet-company-web1/konfigurator.sublime-project"
 			],
-			[
-				"october",
-				"~/Development/public/october/october.sublime-project"
-			],
 			[
 				"to",
 				"~/Development/public/todoapi/todoapi.sublime-project"

diff --git a/plugins/watchlearn/movies/models/Movie.php b/plugins/watchlearn/movies/models/Movie.php
@@ -100,6 +100,12 @@ public function scopeListFrontEnd($query, $options = []){
 
         }
 
+        $lastPage = $query->paginate($perPage, $page)->lastPage();
+
+        if($lastPage < $page){
+            $page = 1;
+        }
+
         if($year){
             $query->where('year', '=', $year);
         }

diff --git a/themes/olympos/pages/movie-filter-ajax.htm b/themes/olympos/pages/movie-filter-ajax.htm
@@ -21,6 +21,8 @@
         $this['movies'] = Movie::listFrontEnd($options);
         $this['genres'] = Genre::all();
         $this['sortOptions'] = Movie::$allowedSortingOptions;
+        $this['pages'] = $this['movies']->lastPage();
+        $this['page'] = $this['movies']->currentPage();
     }
 
     function prepareYears() {
@@ -43,7 +45,7 @@ <h2 class="ui header" style="margin-top:40px;">Filter Movies</h2>
 <div class="ui grid">
 
     <div class="five wide column">
-        {{ form_ajax('onFilterMovies', { update: { 'movies/movies': '#partialMovies' } }) }}
+        {{ form_ajax('onFilterMovies', { update: { 'movies/movies': '#partialMovies', 'movies/paginate': '#partialPaginate' } }) }}
             <div id="MoviesFilter" class="movies-filter ui form">
                 <div class="ui segment vertical">
                     <label>Genres</label>
@@ -74,6 +76,10 @@ <h2 class="ui header" style="margin-top:40px;">Filter Movies</h2>
                             {% endfor %}
                         </select>
                     </div>
+
+                    <div class="field" id="partialPaginate">
+                        {% partial 'movies/paginate' %}
+                    </div>
                 </div>
             </div>
         {{ form_close() }}

diff --git a/themes/olympos/partials/movies/paginate.htm b/themes/olympos/partials/movies/paginate.htm
@@ -0,0 +1,10 @@
+<label>Page</label>
+<select class="ui fluid dropdown" name="Filter[page]">
+    {% for i in 1..pages %}
+        {%  if i == page %}
+            <option value="{{page}}" selected>{{ page }}</option>
+        {% else %}
+            <option value="{{i}}">{{ i }}</option>
+        {% endif %}
+    {% endfor %}
+</select>