@@ -1,10 +1,25 @@ | |||||
$(".modalCompanyAll").change((e)=>{ | |||||
e.preventDefault(); | |||||
if($(e.target).prop('checked')){ | |||||
$("#modal-form .modalCompanySelect").parent('.drop').hide(); | |||||
$("#modal-form .modalCompanySelect").val('All').change(); | |||||
} | |||||
else{ | |||||
$(".modalCompanySelect").parent('.drop').show(); | |||||
} | |||||
}); | |||||
$(".modalCompanySelect").change(async(e)=>{ | $(".modalCompanySelect").change(async(e)=>{ | ||||
if(e.target.value&&e.target.value!=''){ | |||||
if($(e.target).val()&&$(e.target).val().length>0){ | |||||
// console.log(`/api/divisions${(e.target.value == 'All')?'':`?filters[companies][id][$in]=[${$(e.target).val()}]`}`); | |||||
$(".modalDivisionSelect").removeAttr('disabled'); | $(".modalDivisionSelect").removeAttr('disabled'); | ||||
$(".modalDivisiAll").removeAttr('disabled'); | |||||
var getToken = await fetch(`/session/key?s=jwt`); | var getToken = await fetch(`/session/key?s=jwt`); | ||||
if(getToken.ok){ | if(getToken.ok){ | ||||
var token = await getToken.text(); | var token = await getToken.text(); | ||||
var res = await fetch(`/api/divisions${(e.target.value == 'All')?'':`?filters[companies][id][$in]=${e.target.value}`}`,{ | |||||
var res = await fetch(`/api/divisions${(e.target.value == 'All')?'':`?${$(e.target).val().map((i,idx)=>`filters[companies][id][$in][${idx}]=${i}`).join('&')}`}`,{ | |||||
headers:{ | headers:{ | ||||
"Authorization" : "Bearer "+token, | "Authorization" : "Bearer "+token, | ||||
} | } | ||||
@@ -12,10 +27,15 @@ $(".modalCompanySelect").change(async(e)=>{ | |||||
if(res.ok){ | if(res.ok){ | ||||
var obj = await res.json(); | var obj = await res.json(); | ||||
$(".modalDivisionSelect").empty(); | $(".modalDivisionSelect").empty(); | ||||
$(".modalDivisionSelect").append(($("#formCreateAdmin").length>0)?'<option value="All">Semua</option>':'<option value="">Pilih divisi dari list</option>'); | |||||
// $(".modalDivisionSelect").append(($("#formCreateAdmin").length>0)?'<option value="All">Semua</option>':'<option value="">Pilih divisi dari list</option>'); | |||||
obj.data.forEach((i)=>{ | obj.data.forEach((i)=>{ | ||||
$(".modalDivisionSelect").append(`<option value="${i.id}">${i.attributes.Name}</option>`); | $(".modalDivisionSelect").append(`<option value="${i.id}">${i.attributes.Name}</option>`); | ||||
}); | }); | ||||
if($('#modal-form .modalDivisionSelect')){ | |||||
selectDivisiList.load(); | |||||
selectDivisiList.renderOptions(); | |||||
} | |||||
} | } | ||||
} | } | ||||
else{ | else{ | ||||
@@ -27,6 +47,16 @@ $(".modalCompanySelect").change(async(e)=>{ | |||||
} | } | ||||
}); | }); | ||||
$(".modalDivisiAll").change((e)=>{ | |||||
e.preventDefault(); | |||||
if($(e.target).prop('checked')){ | |||||
$(".modalDivisionSelect").parent('.drop').hide(); | |||||
} | |||||
else{ | |||||
$(".modalDivisionSelect").parent('.drop').show(); | |||||
} | |||||
}); | |||||
$('#modal-reset-password').on('shown.bs.modal',async function () { | $('#modal-reset-password').on('shown.bs.modal',async function () { | ||||
var getToken = await fetch(`/session/key?s=jwt`); | var getToken = await fetch(`/session/key?s=jwt`); | ||||
if(getToken.ok){ | if(getToken.ok){ | ||||
@@ -5,11 +5,11 @@ let attachment; | |||||
let removeMedia = []; | let removeMedia = []; | ||||
var selectCompanyList = new drop({ | var selectCompanyList = new drop({ | ||||
selector: '.modalCompanySelect' | |||||
selector: '#modal-form .modalCompanySelect' | |||||
}); | }); | ||||
var selectDivisiList = new drop({ | var selectDivisiList = new drop({ | ||||
selector: '.modalDivisionSelect' | |||||
selector: '#modal-form .modalDivisionSelect' | |||||
}); | }); | ||||
@@ -294,6 +294,10 @@ $('#modal-form').on('shown.bs.modal', async function() { | |||||
$("#modal-form input[type!='hidden']").val(''); | $("#modal-form input[type!='hidden']").val(''); | ||||
$('#modal-form select').val(''); | $('#modal-form select').val(''); | ||||
$('#modal-form select[name=division]').attr('disabled','disabled'); | $('#modal-form select[name=division]').attr('disabled','disabled'); | ||||
$('#modal-form input.modalDivisiAll').attr('disabled','disabled'); | |||||
$('#modal-form input[type=checkbox]').prop('checked',false); | |||||
$("#modal-form .modalCompanySelect").parent('.drop').show(); | |||||
$("#modal-form .modalDivisionSelect").parent('.drop').show(); | |||||
$('#modal-form textarea').html(''); | $('#modal-form textarea').html(''); | ||||
$('#modal-form textarea').val(''); | $('#modal-form textarea').val(''); | ||||
const container = document.getElementById('participantCounter'); | const container = document.getElementById('participantCounter'); | ||||
@@ -54,6 +54,9 @@ var drop = function(info){var o = { | |||||
this.render(); | this.render(); | ||||
}, | }, | ||||
toggle: function(){ | toggle: function(){ | ||||
// if(this.html.drop.classList.contains('open')){ | |||||
// $(info.selector).val(this.selected.filter(i=>!i.removed).map(i=>$(info.selector).children('option')[i.index].value)).trigger('change') | |||||
// } | |||||
this.html.drop.classList.toggle('open'); | this.html.drop.classList.toggle('open'); | ||||
}, | }, | ||||
addOption: function(e, element){ | addOption: function(e, element){ | ||||
@@ -82,14 +85,18 @@ var drop = function(info){var o = { | |||||
}, | }, | ||||
load: function(){ | load: function(){ | ||||
this.options = []; | this.options = []; | ||||
this.html.options =render.get(info.selector + ' option'); | |||||
for(var i = 0; i < this.html.options.length; i++){ | for(var i = 0; i < this.html.options.length; i++){ | ||||
var option = this.html.options[i] | |||||
this.options[i] = { | |||||
html: option.innerHTML, | |||||
value: option.value, | |||||
selected: option.selected, | |||||
state: '' | |||||
var option = this.html.options[i]; | |||||
if(!$(option).prop('hidden')){ | |||||
this.options[i] = { | |||||
html: option.innerHTML, | |||||
value: option.value, | |||||
selected: option.selected, | |||||
state: '', | |||||
} | |||||
} | } | ||||
} | } | ||||
}, | }, | ||||
preselect: function(){ | preselect: function(){ | ||||
@@ -145,6 +152,10 @@ var drop = function(info){var o = { | |||||
}) | }) | ||||
}, | }, | ||||
changeState: function(state){ | changeState: function(state){ | ||||
var drop = this; | |||||
setTimeout(function(){ | |||||
$(info.selector).val(drop.selected.filter(i=>!i.removed).map(i=>$(info.selector).children('option')[i.index].value)).trigger('change'); | |||||
}, 1000); | |||||
switch(state){ | switch(state){ | ||||
case 'remove': | case 'remove': | ||||
return 'hide' | return 'hide' | ||||
@@ -152,13 +163,14 @@ var drop = function(info){var o = { | |||||
return 'hide' | return 'hide' | ||||
default: | default: | ||||
return '' | return '' | ||||
} | |||||
}; | |||||
}, | }, | ||||
isSelected: function(index){ | isSelected: function(index){ | ||||
var check = false | var check = false | ||||
this.selected.forEach(function(select){ | this.selected.forEach(function(select){ | ||||
if(select.index == index && select.removed == false) check = true | if(select.index == index && select.removed == false) check = true | ||||
}) | }) | ||||
return check | return check | ||||
} | } | ||||
}; o.init(); return o;} | }; o.init(); return o;} | ||||
@@ -1,5 +1,5 @@ | |||||
<link href="/assets/owl.carousel.min.css" rel="stylesheet"> | <link href="/assets/owl.carousel.min.css" rel="stylesheet"> | ||||
<link href="/vendor/multiselect-master/css/style.css" rel="stylesheet"> | |||||
<body> | <body> | ||||
<link rel="stylesheet" href="/css/dashboard.css"> | <link rel="stylesheet" href="/css/dashboard.css"> | ||||
<!-- Sidenav --> | <!-- Sidenav --> | ||||
@@ -109,7 +109,7 @@ | |||||
<div class="row mt-3 <%= locals.role!='Admin' ?'hide' : '' %>"> | <div class="row mt-3 <%= locals.role!='Admin' ?'hide' : '' %>"> | ||||
<div class="col-sm"> | <div class="col-sm"> | ||||
<select name="company" class="form-control form-control-sm ml-2" id="companySelect"> | <select name="company" class="form-control form-control-sm ml-2" id="companySelect"> | ||||
<option value="">Pilih Company</option> | |||||
<option disabled value="">Pilih Company</option> | |||||
<option <%= locals.company &&(company == 'All') ? `selected` : '' %> value="All">Semua</option> | <option <%= locals.company &&(company == 'All') ? `selected` : '' %> value="All">Semua</option> | ||||
<% for(var i=0; i<companies.length; i++) {%> | <% for(var i=0; i<companies.length; i++) {%> | ||||
<% var selected = locals.company &&(company == companies[i].id) ? `selected` : '' %> | <% var selected = locals.company &&(company == companies[i].id) ? `selected` : '' %> | ||||
@@ -31,13 +31,20 @@ | |||||
</div> | </div> | ||||
<div class="form-group mb-3"> | <div class="form-group mb-3"> | ||||
<label for="modalCompanySelect" class="form-control-label">Company</label> | <label for="modalCompanySelect" class="form-control-label">Company</label> | ||||
<div class="input-group input-group-merge input-group-alternative"> | |||||
<div class="input-group-prepend"> | |||||
<span class="input-group-text"><i class="ni ni-istanbul"></i></span> | |||||
<div class="input-group input-group-merge input-group-alternative" style="background-color: white;"> | |||||
<div class="input-group"> | |||||
<span class="col-9 input-group-text"><i class="ni ni-istanbul"></i> Pilih Company</span> | |||||
<div class="form-group col-3 input-group-text" style="justify-content: end;"> | |||||
<label for="modalCompanyAll" class="form-control-label"> All</label> | |||||
<label class="custom-toggle"> | |||||
<input class="modalCompanyAll" type="checkbox"> | |||||
<span class="custom-toggle-slider rounded-circle"></span> | |||||
</label> | |||||
</div> | |||||
</div> | </div> | ||||
<select name="company" class="form-control modalCompanySelect"> | |||||
<option value="">Pilih company</option> | |||||
<option value="All">Semua</option> | |||||
<select multiple name="company" class="form-control modalCompanySelect"> | |||||
<!-- <option value="">Pilih company</option> --> | |||||
<option hidden class="hide" value="All">Semua</option> | |||||
<% for(var i=0; i<companies.length; i++) {%> | <% for(var i=0; i<companies.length; i++) {%> | ||||
<option value="<%= companies[i].id %>"><%= companies[i].attributes.Name %></option> | <option value="<%= companies[i].id %>"><%= companies[i].attributes.Name %></option> | ||||
<% } %> | <% } %> | ||||
@@ -46,12 +53,19 @@ | |||||
</div> | </div> | ||||
<div class="form-group"> | <div class="form-group"> | ||||
<label for="modalDivisionSelect" class="form-control-label">Division</label> | <label for="modalDivisionSelect" class="form-control-label">Division</label> | ||||
<div class="input-group input-group-merge input-group-alternative"> | |||||
<div class="input-group-prepend"> | |||||
<span class="input-group-text"><i class="ni ni-shop"></i></span> | |||||
<div class="input-group input-group-merge input-group-alternative" style="background-color: white;"> | |||||
<div class="input-group"> | |||||
<span class="col-9 input-group-text"><i class="ni ni-shop"></i> Pilih Divisi</span> | |||||
<div class="form-group col-3 input-group-text" style="justify-content: end;"> | |||||
<label for="modalDivisiAll" class="form-control-label"> All</label> | |||||
<label class="custom-toggle"> | |||||
<input class="modalDivisiAll" type="checkbox"> | |||||
<span class="custom-toggle-slider rounded-circle"></span> | |||||
</label> | |||||
</div> | |||||
</div> | </div> | ||||
<select name="division" class="form-control modalDivisionSelect" disabled> | <select name="division" class="form-control modalDivisionSelect" disabled> | ||||
<option value="All">Semua</option> | |||||
<!-- <option value="All">Semua</option> --> | |||||
</select> | </select> | ||||
</div> | </div> | ||||
</div> | </div> | ||||