filtrify

assets/js/app.js

@@ -12,13 +12,22 @@ import 'bootstrap-star-rating';
 import 'bootstrap-star-rating/css/star-rating.css';
 import 'bootstrap-star-rating/themes/krajee-fa/theme';
 import 'bootstrap-star-rating/themes/krajee-fa/theme.css';
-
 import './suivifilms2';
 import './addCollectionWidget';
 import './filtrenotes';
+import './filtre';
+
+import '../filtrify/js/filtrify';
+import '../filtrify/css/filtrify.css'
 
 $(document).ready(function() {
     $(function() {
+        $.filtrify("tableFilms", "placeHolder");
+
+        $('#filtre').on("keyup", function () {
+            $(this).filtre();
+        });
+
         $('[data-toggle="tooltip"]').tooltip();
 
         $('.add-another-collection-widget').addCollection();

assets/js/filtre.js

@@ -0,0 +1,9 @@
+(function ($) {
+    $.fn.filtre = function () {
+        let value = $(this).val().toLowerCase();
+        let target = $(this).data('target');
+        $(target + " tr").filter(function () {
+            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
+        });
+    };
+}) (jQuery);

templates/videotheque/liste.html.twig

@@ -11,13 +11,17 @@
 {% block body %}
 	<div class="container-fluid">
 		<div class="row">
-			<div class="col-6">
+			<div class="col-3">
 			{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
 			<p><a class="btn btn-primary" role="button" href="{{ path('videotheque_ajouter') }}"><i class="fa fa-plus-square fa-lg"></i> Ajouter un film</a></p>
 			{% endif %}
 			</div>
+			<div class="col-6">
+				<input type="text" id="filtre" placeholder="Filtre" data-target="#tableFilms">
+				<div id="placeHolder"></div>
+			</div>
 			{% if note is defined %}
-			<div class="col-6 text-right">
+			<div class="col-3 text-right">
 				<p>Filtrer par film au dessus de
 				<input class="rating"
 					data-disabled="false"
@@ -56,9 +60,9 @@
 					#}
 				</tr>
 			</thead>
-			<tbody>
+			<tbody id="tableFilms">
 				{% for film in listeFilms %}
-				<tr>
+				<tr data-auteur="{{ film.authered.nomComplet }}">
 					{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
 						<td>
 							{%  if app.user.wantToSee(film) %}