jev/opensem
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add new component, add flags on filter

Browse Source
This commit is contained in:
Ludovic CANDELLIER
2022-05-09 23:14:50 +02:00
parent 3370b8061c
commit ce9f613b66
8 changed files with 184 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
resources/views/Shop/Tags/partials/filter.blade.php
View File

@@ -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>

7
resources/views/Shop/layout/partials/header-nav.blade.php
View File

@@ -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">

49
resources/views/load/form/daterangepicker.blade.php Normal file
View File

@@ -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

31
resources/views/load/form/duallist_multiselect.blade.php Normal file
View File

@@ -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

6
resources/views/load/form/icheck.blade.php Normal file
View File

@@ -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

13
resources/views/load/form/tooltip.blade.php Normal file
View File

@@ -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

74
resources/views/load/form/validator.js Normal file
View File

@@ -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');
});
}