Making Websites With October CMS - Part 41 - Ajax Frontend Filters

plugins/watchlearn/movies/models/Movie.php

@@ -50,4 +50,35 @@ class Movie extends Model
     public $attachMany = [
         'movie_gallery' => 'System\Models\File'
     ];
+
+    public function scopeListFrontEnd($query, $options = []){
+
+        extract(array_merge([
+            'page' => 1,
+            'perPage' => 10,
+            'sort' => 'created_at desc',
+            'genres' => null,
+            'year' => ''
+        ], $options));
+
+        if($genres !== null) {
+
+            if(!is_array($genres)){
+                $genres = [$genres];
+            }
+
+            foreach ($genres as $genre){
+                $query->whereHas('genres', function($q) use ($genre){
+                    $q->where('id', '=', $genre);
+                });
+            }
+
+        }
+
+        if($year){
+            $query->where('year', '=', $year);
+        }
+
+        return $query->paginate($perPage, $page);
+    }
 }

themes/olympos/assets/dist/js/app.js

@@ -86,7 +86,13 @@ var HelloWorld = function HelloWorld() {
     alert('Hello World');
 };
 
-//new HelloWorld;
+(function ($) {
+
+    $('#MoviesFilter').on('change', 'input, select', function () {
+        var $form = $(this).closest('form');
+        $form.request();
+    });
+})(jQuery);
 
 /***/ }),
 /* 1 */

themes/olympos/assets/js/app.js

@@ -9,4 +9,11 @@ class HelloWorld{
     }
 }
 
-//new HelloWorld;
+(function($){
+
+    $('#MoviesFilter').on('change', 'input, select', function(){
+        var $form = $(this).closest('form');
+        $form.request();
+    });
+
+})(jQuery);

themes/olympos/assets/sass/style.scss

@@ -1,7 +1,4 @@
-/* Vendor */
-@import "susy";
-@import "su";
-
+@import "~semantic-ui-css/semantic.min.css";
 
 /* Setup */
 @import "reset";

themes/olympos/pages/homepage.htm

@@ -25,7 +25,7 @@
 
 <ul class="movie-list">
     {% for movie in movies %}
-        <li>
+        <li class="ui segment stacked">
             {# Use spaceless tag to remove spaces inside the A tag. #}
             <h3>
                 <a href="/movies/movie/{{movie.slug}}">

themes/olympos/pages/movie-filter-ajax.htm

@@ -0,0 +1,73 @@
+title = "Filter movies"
+url = "/ajax-filter"
+layout = "default"
+is_hidden = 0
+
+==
+<?
+    use Watchlearn\Movies\Models\Movie;
+    use Watchlearn\Movies\Models\Genre;
+
+    function onStart() { $this->prepareVars(); }
+    function onFilterMovies() { $this->prepareVars(); }
+
+
+    function prepareVars() {
+        $options = post('Filter', []);
+
+        $this['movies'] = Movie::listFrontEnd($options);
+        $this['genres'] = Genre::all();
+
+        $movies = Movie::all();
+        $years = [];
+
+        foreach($movies as $movie){
+            $years[] = $movie->year;
+        }
+
+        $years = array_unique($years);
+
+        $this['years'] = $years;
+    }
+
+?>
+==
+<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' } }) }}
+            <div id="MoviesFilter" class="movies-filter ui form">
+                <div class="ui segment vertical">
+                    <label>Genres</label>
+                    {% for genre in genres %}
+                        <div class="field">
+                            <div class="ui checkbox">
+                                <input type="checkbox" name="Filter[genres][]" value="{{ genre.id }}" />    
+                                <label>{{genre.genre_title}}</label>
+                            </div>
+                        </div>
+                    {% endfor %}
+
+                    <div class="field">
+                        <label>Year</label>
+                        <select class="ui fluid dropdown" name="Filter[year]">
+                            <option value="">Select Year</option>
+                            {% for year in years|sort %}
+                                <option value="{{year}}">{{ year }}</option>
+                            {% endfor %}
+                        </select>
+                    </div>
+                </div>
+            </div>
+        {{ form_close() }}
+    </div>
+
+    <div class="eleven wide column">
+        <div id="partialMovies">
+            {% partial 'movies/movies' %}
+        </div>
+    </div>
+
+</div>

themes/olympos/partials/movies/movies.htm

@@ -0,0 +1,26 @@
+{% if movies|length %}
+
+    {% for movie in movies %}
+        <div class="ui segment vertical">
+            <h3 class="ui header">{{movie.name}}</h3>
+            <div class="ui">{{ movie.year }}</div>
+
+            <div class="ui segment">
+                <ul class="ui list bulleted horizontal">
+                    {% for genre in movie.genres %}
+                        <li class="item">{{ genre.genre_title }}</li>
+                    {% endfor %}
+                </ul>
+            </div>
+        </div>
+    {% endfor %}
+
+{% else %}
+
+    <div class="ui message text-center">
+        <p>
+            There are no movies that match the criteria.
+        </p>
+    </div>
+
+{% endif %}