From ce9f613b669c87e5123cd7dc9d5aca8e4b29d5cb Mon Sep 17 00:00:00 2001
From: Ludovic CANDELLIER <ludovic.candellier@fundglobam.com>
Date: Mon, 9 May 2022 23:14:50 +0200
Subject: [PATCH] Add new component, add flags on filter

---
 app/Http/Controllers/Shop/HomeController.php  |  1 +
 .../views/Shop/Tags/partials/filter.blade.php |  9 ++-
 .../Shop/layout/partials/header-nav.blade.php |  7 +-
 .../views/load/form/daterangepicker.blade.php | 49 ++++++++++++
 .../load/form/duallist_multiselect.blade.php  | 31 ++++++++
 resources/views/load/form/icheck.blade.php    |  6 ++
 resources/views/load/form/tooltip.blade.php   | 13 ++++
 resources/views/load/form/validator.js        | 74 +++++++++++++++++++
 8 files changed, 184 insertions(+), 6 deletions(-)
 create mode 100644 resources/views/load/form/daterangepicker.blade.php
 create mode 100644 resources/views/load/form/duallist_multiselect.blade.php
 create mode 100644 resources/views/load/form/icheck.blade.php
 create mode 100644 resources/views/load/form/tooltip.blade.php
 create mode 100644 resources/views/load/form/validator.js

diff --git a/app/Http/Controllers/Shop/HomeController.php b/app/Http/Controllers/Shop/HomeController.php
index f2feba9c..e0338063 100644
--- a/app/Http/Controllers/Shop/HomeController.php
+++ b/app/Http/Controllers/Shop/HomeController.php
@@ -21,6 +21,7 @@ class HomeController extends Controller
         // dump($data['shelves']);
         // exit;
         $data['tags'] = TagGroups::getWithTagsAndCountOffers();
+        $data['no_filter'] = true;
         return view('Shop.home', $data);
     }
 }
diff --git a/resources/views/Shop/Tags/partials/filter.blade.php b/resources/views/Shop/Tags/partials/filter.blade.php
index 932ea10e..2e371388 100644
--- a/resources/views/Shop/Tags/partials/filter.blade.php
+++ b/resources/views/Shop/Tags/partials/filter.blade.php
@@ -1,5 +1,5 @@
-<aside class="main-sidebar float-left d-none" id="sidebar" style="width: 300px;">
-    <section class="sidebar shadow" style="height: auto;">
+<aside class="main-sidebar float-left @if (!($filter_on ?? false)) d-none" @endif id="sidebar" style="width: 200px;">
+    <section class="sidebar shadow mr-2" style="height: auto;">
 
         <div class="row">
             <div class="col-12">
@@ -14,8 +14,8 @@
                     'id' => 'tag_group_' . $tag_group_id,
                 ])
                     @foreach ($group['tags'] as $tag)
-                        <div>
-                            @include('components.form.checkbox', [
+                        <div class="form-inline">
+                            @include('components.form.checkboxes.icheck', [
                                 'name' => 'tag[]',
                                 'val' => $tag['id'],
                             ])
@@ -30,6 +30,7 @@
 </aside>
 
 @include('load.layout.chevron')
+@include('load.form.icheck')
 
 @push('js')
     <script>
diff --git a/resources/views/Shop/layout/partials/header-nav.blade.php b/resources/views/Shop/layout/partials/header-nav.blade.php
index ba2f8dc6..e0fd20b9 100644
--- a/resources/views/Shop/layout/partials/header-nav.blade.php
+++ b/resources/views/Shop/layout/partials/header-nav.blade.php
@@ -2,15 +2,18 @@
 
 	<div class="col-3 form-inline">
 		<a href="/"><img src="/img/logo.jpg" class="img-responvive"></a>
+
+		@if (!($no_filter ?? false))
 		<a id="filters" href="#" class="text-white pl-3">
-			<span id="filter-on" class="fa-stack fa-2x">
+			<span id="filter-on" class="fa-stack fa-2x @if ($filter_on ?? false) d-none" @endif">
 				<i class="fa fa-stack-1x fa-filter"></i>
 			</span>
-			<span id="filter-off" class="fa-stack fa-2x d-none">
+			<span id="filter-off" class="fa-stack fa-2x @if (!($filter_on ?? false)) d-none" @endif">
 				<i class="fa fa-stack-1x fa-filter"></i>
 				<i class="fa fa-stack-2x fa-ban" style="color:Tomato"></i>
 			</span>
 		</a>
+		@endif
 	</div>
 
 	<div class="col-5 form-inline">	
diff --git a/resources/views/load/form/daterangepicker.blade.php b/resources/views/load/form/daterangepicker.blade.php
new file mode 100644
index 00000000..0b59dd2b
--- /dev/null
+++ b/resources/views/load/form/daterangepicker.blade.php
@@ -0,0 +1,49 @@
+@if(!defined('LOAD_DATEPICKER'))
+    @push('css')
+        <link rel="stylesheet" href="/assets/plugins/daterangepicker/daterangepicker.css">
+    @endpush
+    @push('js')
+        @include('load.moment')
+        <script src="/assets/plugins/daterangepicker/daterangepicker.js"></script>
+        <script src="/assets/plugins/daterangepicker/{{ App::getLocale() }}.js"></script>
+        <script>
+
+            function initDaterangepicker(sel, start, end, format) {
+                var selector = (typeof(sel) == 'undefined') ? '.daterangepickerItems' : sel;
+                var format = (typeof(format) == 'undefined') ? 'L' : format;
+                var start = (typeof(start) == 'undefined') ? moment() : start; 
+                var end = (typeof(end) == 'undefined') ? moment() : end;
+                $(selector).daterangepicker({
+                    alwaysShowCalendars: true,
+		            autoUpdateInput: false,
+                    format: dateRangePickerLanguage.format,
+                    showDropdowns: true,
+		            showWeekNumbers: true,
+                    startDate: start,
+                    endDate: end,
+                    separator: dateRangePickerLanguage.separator,
+            		locale: dateRangePickerLanguage.locale,
+		            buttonClasses: 'btn light uppercase weight-900',
+                    ranges: dateRangePickerLanguage.ranges,
+                }).on("apply.daterangepicker", function (e, picker) {
+                    var range = picker.startDate.format(picker.locale.format) + ' - ' + picker.endDate.format(picker.locale.format);
+                    picker.element.val(range);
+                });
+            }
+            
+            function initDatetimerangepicker(sel, date, format) {
+                var selector = (typeof(sel) == 'undefined') ? '.datetimerangepicker' : sel;
+                var format = (typeof(format) == 'undefined') ? '' : format;
+                var date = (typeof(date) == 'undefined') ? new Date() : date;  
+                $(selector).daterangepicker({
+                    timePicker: true,
+                    locale: {
+                        format: format,
+                    }
+                });
+            }
+
+        </script>
+    @endpush
+    @php(define('LOAD_DATEPICKER', true))
+@endif
diff --git a/resources/views/load/form/duallist_multiselect.blade.php b/resources/views/load/form/duallist_multiselect.blade.php
new file mode 100644
index 00000000..4c02cc3b
--- /dev/null
+++ b/resources/views/load/form/duallist_multiselect.blade.php
@@ -0,0 +1,31 @@
+@if(!defined('LOAD_DUALLIST'))
+	@push('scripts')
+		<script src="/assets/plugins/multiselect/js/jquery.multi-select.js"></script>  
+
+		<script>
+			function initDualList(sel, model) {
+				var model = (typeof(model) == 'undefined') ? '{{ $model ?? '' }}' : model;
+				var selector = (typeof(sel) == 'undefined') ? '.duallist' : sel;
+				var selectableHeader = "<div class='text-center'><label class='light'>{{ __('non_selected') }}</label></div>";
+    			var selectionHeader = "<div class='text-center'><label class='green'>{{ __('selected') }}</label></div>";
+
+				var settings = {
+					selectableHeader: selectableHeader + "<input type='text' id='"+model+"_selectable_search' class='mb-2 form-control quicksearch selectable-search styled' autocomplete='off' placeholder='{{ __('search') }}'>",
+					selectionHeader: selectionHeader + "<input type='text' id='"+model+"_selection_search' class='mb-2 form-control quicksearch selectable-search styled' autocomplete='off' placeholder='{{ __('search') }}'>",
+					selectableFooter: "<button id='"+model+"_select_all' class='btn btn-alt btn-success btn-block mt-2 pr-3'><span>{{ __('select_all') }}</span><i class='fa fa-arrow-right pull-right'></i></button>",
+					selectionFooter: "<button id='"+model+"_deselect_all' class='btn btn-alt btn-danger btn-block mt-2 pl-3'><i class='fa fa-arrow-left pull-left'></i><span>{{ __('deselect_all') }}</span></button>",
+					selectableOptgroup: true,
+					cssClass: "w-100 bg-darker",
+				};
+
+				$(selector).multiSelect(settings);
+			}
+		</script>
+
+	@endpush
+
+	@push('css')
+		<link rel="stylesheet" href="/assets/plugins/multiselect/css/multi-select.css">  
+	@endpush
+	@php(define('LOAD_DUALLIST', true))
+@endif
\ No newline at end of file
diff --git a/resources/views/load/form/icheck.blade.php b/resources/views/load/form/icheck.blade.php
new file mode 100644
index 00000000..7b95ff12
--- /dev/null
+++ b/resources/views/load/form/icheck.blade.php
@@ -0,0 +1,6 @@
+@if(!defined('LOAD_ICHECK'))
+	@push('css')
+		<link rel="stylesheet" href="/assets/plugins/icheck/icheck-bootstrap.min.css">  
+	@endpush
+	@php(define('LOAD_ICHECK', true))
+@endif
\ No newline at end of file
diff --git a/resources/views/load/form/tooltip.blade.php b/resources/views/load/form/tooltip.blade.php
new file mode 100644
index 00000000..c4825e0b
--- /dev/null
+++ b/resources/views/load/form/tooltip.blade.php
@@ -0,0 +1,13 @@
+@if(!defined('LOAD_TOOLTIP'))
+	@push('scripts')
+		<script>
+			function initTooltip() {
+				$('[data-toggle="tooltip"]').tooltip({
+					trigger : 'hover',
+					delay: { "show": 500, "hide": 100 }
+				});  
+			}
+		</script>
+	@endpush
+	@php(define('LOAD_TOOLTIP', true))
+@endif
\ No newline at end of file
diff --git a/resources/views/load/form/validator.js b/resources/views/load/form/validator.js
new file mode 100644
index 00000000..bd7c154a
--- /dev/null
+++ b/resources/views/load/form/validator.js
@@ -0,0 +1,74 @@
+function initValidator() {
+	$( document ).ready(function() {
+		// console.log('initValidator');
+		// $(window).on('load', function() {
+		// window.addEventListener('load', function() {
+
+			// console.log('initValidator load');
+			var forms = $('.needs-validation');
+
+			$(forms).each(function(i, form) {
+				form.addEventListener('submit', function(event) {
+					checkValidatorFields(form);
+				}, false);
+			});
+
+		// }, false);
+	});
+}
+
+function checkValidatorFields(form) {
+	console.log('checkValidatorFields');
+	if (form.checkValidity() === false) {
+		console.log('non validé');
+		event.preventDefault();
+		event.stopPropagation();
+	} else {
+		console.log("validé");
+		form.classList.add('valid');
+	}
+	form.classList.add('was-validated');
+			
+	form.addEventListener('invalid', function(e) {
+		console.log(e);
+	}, true);
+
+}
+
+function initValidatorHtml() {
+	window.addEventListener('load', function() {
+		// Fetch all the forms we want to apply custom Bootstrap validation styles to
+		var forms = document.getElementsByClassName('needs-validation');
+		// Loop over them and prevent submission
+		var validation = Array.prototype.filter.call(forms, function(form) {
+		  	form.addEventListener('submit', function(event) {
+				if (form.checkValidity() === false) {
+					event.preventDefault();
+					event.stopPropagation();
+				}
+				form.classList.add('was-validated');
+		  	}, false);
+		});
+	}, false);	
+}
+
+function initValidator2() {
+	$('.needs-validation').bootstrapValidator().on('submit', function(e) {
+		if (e.isDefaultPrevented()) {
+			console.log('bad');
+		} else {
+			console.log('good');
+		}
+
+		e.preventDefault();
+		e.stopPropagation();
+		// Active the panel element containing the first invalid element
+		var $form         = $(e.target),
+			validator     = $form.data('bootstrapValidator'),
+			$invalidField = validator.getInvalidFields().eq(0),
+			$collapse     = $invalidField.parents('.collapse');
+
+		$collapse.collapse('show');
+	});
+
+}
\ No newline at end of file